Question

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

Answer 1

您可以使用select代替option代替名单吗？键盘会直接工作。

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

Angular下拉菜单 - 使用键盘上/下键在下拉列表中移动项目

2 个答案: