使用上/下箭頭通過AngularJS聚焦並選擇列表值

Question

我有一個input元素，當它的內容更改時-填充了ul列表。 我能夠專注於使用CSS的鼠標懸停。

問題：

1）如何使用向上/向下箭頭鍵 聚焦 ul > li列表值？
2）如何使用Enter鍵 選擇 ul > li值？

請參考http://jsfiddle.net/3etbtfwL/458/

Answer 1

您可以在input元素上使用ngKeydown指令來處理keydown事件，並檢查按下了哪些鍵 （在您的情況下為ngClass代碼），並使用ngClass直觀地表示當前集中的列表元素。 這是一個工作示例：

 var app = angular.module('httpApp', []) .controller('httpAppCtrlr', function ($scope) { $scope.focusedIndex = 0; $scope.Change = function (item) { $scope.items = $.grep($scope.list, function (v) { if (v.name === item) { return v.value; } }); $scope.focusedIndex = 0; }; $scope.selected = function (value) { $scope.selectedValue = value; }; $scope.list = [ { "name": "1", "value": "value1" }, { "name": "1", "value": "value2" }, { "name": "1", "value": "value3" }, { "name": "2", "value": "value4" }, { "name": "2", "value": "value5" } ]; $scope.handleKeyDown = function($event) { var keyCode = $event.keyCode; if (keyCode === 40) { // Down $event.preventDefault(); if ($scope.focusedIndex !== $scope.items.length - 1) { $scope.focusedIndex++; } } else if (keyCode === 38) { // Up $event.preventDefault(); if ($scope.focusedIndex !== 0) { $scope.focusedIndex--; } } else if (keyCode === 13 && $scope.focusedIndex >= 0) { // Enter $event.preventDefault(); $scope.selected($scope.list[$scope.focusedIndex].value); } }; }); 

 .outputLists { padding: 6px; display: block; cursor: pointer; outline: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .outoutList { display: block; z-index: 99; width: 30%; position: absolute; top: 36px; margin: -1px 0 0; border: 1px solid #eee; border-top: 0; padding: 0; background: #eee; -webkit-border-radius: 0 0 5px 5px; } .outputLists.focus { background: #428bca; } 

 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script> <div data-ng-app='httpApp' data-ng-controller='httpAppCtrlr'> <input type="text" ng-change="Change(item)" ng-model="item" placeholder="select" ng-keydown="handleKeyDown($event)"/> <ul class="outoutList" tabindex="0" ng-keydown="handleKeyDown($event)"> <li ng-repeat="item in items" data-item="true" data-index="0" class="outputLists" ng-click="selected(item.value)" ng-class="{'focus': focusedIndex == $index}" ng-mouseover="$parent.focusedIndex = $index"> {{item.value}} </li> </ul> <lable> Selected Value: {{selectedValue}}, Vocused index: {{focusedIndex}} </lable> </div> <script src="//code.jquery.com/jquery-1.10.2.js"></script> 

更新：要允許對列表元素進行鍵盤操作，可以將tabindex添加到ul並使用相同的ng-keydown事件。