Question

我使用Angular Bootstrap 2.2.0和Angular 1.5。

即使启用了keyboard-nav选项，键盘导航也无法处理UIB下拉菜单。这是我的代码：

<div class="btn-group"
     uib-dropdown
     keyboard-nav="true"
     on-toggle="vm.setTouchNgModel(open)">

     <button type="button"
             class="btn btn-secondary btn-dropdown"
             ng-class="{'text-muted': !vm.selectedOptionLabel }"
             uib-dropdown-toggle
             ng-disabled="vm.selectDisabled">
             {{ vm.selectedOptionLabel || ((vm.selectPlaceholder | translate) || vm.selectPlaceholder) }}
             <i class="caret"></i>
     </button>

     <ul class="dropdown-menu"
         uib-dropdown-menu
         role="menu"
         aria-labelledby="btn-append-to-single-button">
         <li ng-if="vm.inlineOption">
             <a ng-click="vm.setSelectModel(vm.inlineOption)">{{ vm.inlineOption[vm.labelProperty] }}</a>
         </li>
         <li ng-repeat="option in ((vm.filterName && vm.applyFilter(vm.options, vm.filterName, vm.filterOptions, vm.filterExpression)) || vm.options)">
             <a role="menuitem" ng-click="vm.setSelectModel(option)">{{ ((option[vm.labelProperty] || option.label || option) | translate) || ((option[vm.labelProperty] || option.label || option) | translate) }}</a>
         </li>
      </ul>

</div>

Answer 1

我找到了解决方案，选项href标记中需要<a>属性，keyboard-nav才能生效。

Answer 2

<a>代码需要tabindex属性才能成为焦点。

为所有人添加tabindex="0"。值＆＃34; 0＆＃34;使它们按文档顺序列表。

Angular uib-dropdown上的键盘导航无效

2 个答案: