如何使用 Angular Js 使按键 select 在下拉菜单中？

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

例如，您可以尝试将 <li> 上的 filter 与 <ul> 上的 ng-keyup 结合使用。

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

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

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