角度下拉菜单 - 使用键盘上/下键在下拉列表中移动项目
Posted
技术标签:
【中文标题】角度下拉菜单 - 使用键盘上/下键在下拉列表中移动项目【英文标题】：Angular dropdown- moving through items in dropdown list using keyboard up/down key 【发布时间】：2014-09-29 10:06:37 【问题描述】：我在我的项目中使用了角度下拉指令。 我想使用键盘（向上/向下键）通过下拉列表中的项目向上/向下移动。 如何做到这一点？
【问题讨论】：
我的团队也有类似的问题。我们有一个下拉指令绑定到一个过滤下拉内容的输入框。我们需要使用 keydown 选择一个项目。我们不想使用选择，因为项目列表太大。 好点。我们的 UX 测试人员让我们非常头疼，因为几乎不可能找到一个好的 Angular 下拉列表，它实现了简单的<select> 支持的所有内容并添加了更多功能（自定义模板等）。通常插件的开发者会被花哨的想法冲昏头脑，忘记先实现基本功能。
在这里您可以找到此问题的解决方案。 ***.com/questions/31760938/…>
【参考方案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>【讨论】：
以上是关于角度下拉菜单 - 使用键盘上/下键在下拉列表中移动项目的主要内容，如果未能解决你的问题，请参考以下文章