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

Question

我有一个下拉菜单，其中项目尺寸很大，因此我正在寻找一种启用键盘输入（按键）的方法，以便我可以键入内容，并且它会自动移动到下拉菜单中的该选项。有什么建议吗？

<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>

Answer 1

例如，您可以尝试将

filter

上的

<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;
};

但是你应该考虑如何清除输入的值。

但是无论如何，我建议您以某种方式减少列表或创建可见的过滤器（可能是文本输入）。否则用户很难理解这种行为。

Answer 2

您所需要做的就是使用

ng-model

并将其应用为

filter

中的

ng-repeat

。其余部分由 angularjs 自动完成。

例如：

<ul>
    <li>
        <input type="text" ng-model="searchString" placeholder="Search" />
    </li>
    <li ng-repeat="item in all_items | filter: searchString">
        <a href="" ng-click="blabla(item.key)">{{item.val}}</a>
    </li>
</ul>