javascript - 使用向上/向下箭头通过 AngularJS 聚焦和选择列表值

Question

我有一个 input 元素，当它的内容改变时 - 一个 ul 列表被填充。我能够专注于鼠标悬停在使用 css 上。

问题:

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

请引用http://jsfiddle.net/3etbtfwL/458/

Answer 1

您可以在 input 元素上使用 ngKeydown 指令来处理 keydown 事件并检查按下的是什么 key(在您的情况下为 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-按键按下事件。