使用向上/向下箭头聚焦并使用AngularJS选择列表值

Question

我有一个input元素，当它的内容发生变化时 - 填充了一个ul列表。我能够专注于使用CSS的鼠标。

问题：

1）如何使用向上/向下箭头键聚焦ul > li列表值？ 2）如何使用Enter键选择ul > li值？

请参考http://jsfiddle.net/3etbtfwL/458/

Answer 1

您可以在ngKeydown元素上使用input指令来处理keydown事件并检查按下了哪个键（在您的情况下为13,38,40代码）和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事件。