我正在为我的下拉列表添加键盘功能,下面是指令模板。我通过绑定到" ctrl"的隔离范围传递数据。我正在使用Angular和Bootstrap。我想知道是否有人知道一个好的解决方案,可以有效地允许用户在列表中上下移动。我想我主要是因为必须要有角度的" ng-keydown"按钮上的指令,然后从那里移动,并能够使用向上/向下键对焦项目。然后能够使用空格键选择列表项。
<div class="dropdown select-container" ng-class="{'open' : ctrl.isOpen}">
<div class="form-group" ng-if="ctrl.filterMode === 'off'">
<button class="btn btn-default form-control" type="button" ng-keydown="ctrl.onButtonKeydown($event)" ng-click="ctrl.toggleDropdown($event)" ng-disabled="ctrl.ngDisabled === true">
{{ctrl.selectedRow[ctrl.propertyName] ? ctrl.selectedRow[ctrl.propertyName] : ctrl.selectLabel}}
<div class="pull-right"><i ng-class="{'fa fa-angle-up': ctrl.isOpen, 'fa fa-angle-down': !ctrl.isOpen}"></i></div>
</button>
</div>
<ul class="dropdown-menu list-group" ng-disabled="ctrl.ngDisabled === true">
<li class="list-group-item" ng-repeat="row in ctrl.rows | filter: ctrl.filterText" ng-class="{'active': row === ctrl.selectedRow, 'disabledStandardList': ctrl.ngDisabled}"
ng-click="ctrl.onSelectedLocal(row)">
{{row[ctrl.propertyName]}}
</li>
<li class="list-group-item text-center" ng-show="ctrl.rows.length <= 0 || (ctrl.rows | filter: ctrl.filterText).length <= 0">
{{ctrl.emptyMessage}}
</li>
</ul>
</div>
除非指令在按钮上,否则我无法获得任何keydown事件,因为在用户点击按钮打开它之前隐藏了下拉列表。下拉列表打开后,我希望用户能够在他或她移动时上下移动并突出显示当前行,并且能够选择一行。是否可以使用css:focus类在用户上下移动时添加列表?
我有一个有点工作的JQuery示例,但我觉得它被黑客攻击了,我试图尽可能地避免使用JQuery并使用Angular / Vanilla Javascript。如果你有一个使用一些jquery的解决方案,请分享!我已经看到了一些其他类似的例子,但没有任何帮助我。任何帮助表示赞赏。感谢