如何使用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

例如，您可以尝试在<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;
};

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

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