如何使用Angular Js在下拉列表中进行按键选择?

时间:2017-01-05 22:27:46

标签: javascript angularjs drop-down-menu angularjs-ng-repeat angular-ui-bootstrap

我有一个项目大小较大的下拉菜单,所以我正在寻找一种方法来启用键盘输入(按键),以便我可以键入并自动移动到下拉列表中的该选项。有什么建议吗?

<ul uib-dropdown-menu role="menu" style="max-height: 150px; overflow-y: auto; max-width : 10px">
  <li ng-repeat="value in feature.values | unknownValueFilter | featureValueOrder ">
    <a ng-click="currentValue.set(value)" href="">
      {{value | featureValueFormatter }}
    </a>
  </li>
</ul>

1 个答案:

答案 0 :(得分:1)

例如,您可以尝试<li>上的ng-keyup<ul>上的<ul uib-dropdown-menu role="menu" style="max-height: 150px; overflow-y: auto; max-width : 10px" ng-keyup="onKeyUp($event)"> <li ng-repeat="value in feature.values | filter: tappedKeys | unknownValueFilter | featureValueOrder "> <a ng-click="currentValue.set(value)" href=""> {{value | featureValueFormatter }} </a> </li> </ul> 一起使用。

$scope.tappedKeys = '';

$scope.onKeyUp = (e)=>{
  $scope.tappedKeys += e.key;
};

并添加到您的控制器中:

import Foundation


enum Breakdances: String {
    case HoppityHop = "Hop Hop Hop and two step is what I do usually"
    case Greyjoy = "I made up this dance, pretty cool huh?"
    case ButtSwirl = "Let's do the butt swril"
    case PsychMovementWithHands = "Psych, Psych, Psych! Psych"
    case TheDab = "Dabbbbb!"
    case TheBump = "I'm doing the rump bump dance"
}




class Monkeys: Animals, canPlayAroundProtocol, randomJungleActivity {
    static var monkeysPopulation: Int = 0

    var uniqueGiftedDance: Breakdances

    override init(name:String){
        super.init(name: name)
        self.uniqueGiftedDance = uniqueGiftedDance
        Monkeys.monkeysPopulation += 1

    }

    override func makeSound() -> String {
        energyLevel -= 4

        return "Ah ah ah"
    }

    override func eatFood(){
        energyLevel += 2

    }

    override func sleep(){


    }

    func play(){

        let reducedEnergy = energyLevel - 8
        if reducedEnergy < 0 {
            print("\(name) is too tired, I don't have enough energy")
        }else {
        print("Oooo Oooo Oooo")
        print("\(name)'s energy level is now \(reducedEnergy)")
        }

    }

    func startUniqueJungleAct(){

        print(uniqueGiftedDance)

        print("Swinging from a tree and throwing banannas")
    }

    deinit {
        Monkeys.monkeysPopulation -= 1

    }

}

但你应该考虑如何清除打字值。

但无论如何,我建议你减少列表或创建可见的过滤器(可能是文本输入)。否则用户几乎不会理解这种行为。