角度下拉菜单 - 使用键盘上/下键在下拉列表中移动项目答案

【问题标题】：Angular dropdown- moving through items in dropdown list using keyboard up/down key角度下拉菜单 - 使用键盘上/下键在下拉列表中移动项目
【发布时间】：2014-09-29 10:06:37
【问题描述】：

我在我的项目中使用了角度下拉指令。我想使用键盘（向上/向下键）通过下拉列表中的项目向上/向下移动。如何做到这一点？

【问题讨论】：

我的团队也有类似的问题。我们有一个下拉指令绑定到一个过滤下拉内容的输入框。我们需要使用 keydown 选择一个项目。我们不想使用选择，因为项目列表太大。
好点。我们的 UX 测试人员让我们非常头疼，因为几乎不可能找到一个好的 Angular 下拉列表，它实现了简单的 <select> 支持的所有内容并添加了更多功能（自定义模板等）。通常插件的开发者会被花哨的想法冲昏头脑，忘记先实现基本功能。
在这里您可以找到此问题的解决方案。 stackoverflow.com/questions/31760938/…>

标签： angularjs keyboard angularjs-directive angular-ui-bootstrap

【解决方案1】：

你能用select 和option 代替列表吗？这样键盘就可以直接工作了。

【讨论】：

【解决方案2】：

AngularUI 有一个名为“typeahead”的指令来解决这个问题。以下是我使用该库构建的示例：

var mod = angular.module('Controller', ['ui.bootstrap']);


mod.controller('SearchCtrl', function($scope, $http) {

  $scope.selected = undefined;
  $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];

});

.typeahead .custom-popup-wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  background-color: #f9f9f9;
}
.typeahead .custom-popup-wrapper > .message {
  padding: 10px 20px;
  border-bottom: 1px solid #ddd;
  color: #868686;
}
.typeahead .custom-popup-wrapper > .dropdown-menu {
  position: static;
  float: none;
  display: block;
  min-width: 160px;
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.2/ui-bootstrap-tpls.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />


<html ng-app="Controller">

<body>
  <div class='container-fluid typeahead' ng-controller="SearchCtrl">

    <h4>Search:</h4>
    <input type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">

  </div>
</body>

</html>

【讨论】：