Question

我有这个下拉菜单，我使用ng-repeat填充：

<div class="btn-group btn-xs" dropdown keyboard-nav>
  <input id="simple-btn-keyboard-nav" ng-model="available_fields_query" id="single-button" dropdown-toggle ng-disabled="disabled" placeholder="Add New Field">
  </input>
  <ul class="dropdown-menu" role="menu" aria-labelledby="simple-btn-keyboard-nav">
    <li ng-repeat="item in availableFields">
      <a ng-click="addField(item)" role="menuitem">{{item}}</a>
    </li>
  </ul>
</div>

我本来应该能够使用kb箭头浏览它，但出于某种原因我无法用制表符或箭头聚焦它。

但如果我手动做这样的事情：

<div class="btn-group" dropdown dropdown-append-to-body>
      <button id="btn-append-to-body" type="button" class="btn btn-primary" dropdown-toggle>
        Dropdown on Body <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="btn-append-to-body">
        <li role="menuitem"><a href="#">Action</a></li>
        <li role="menuitem"><a href="#">Another action</a></li>
        <li role="menuitem"><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li role="menuitem"><a href="#">Separated link</a></li>
      </ul>
    </div>

它运行正常，我可以使用键盘在下拉列表中定位字段。

为什么会发生这种情况，我该如何解决？

$scope.addField = function (value) {
            $scope.state_from_editor.fields.push(value);
        };

Answer 1

因为<a>属性缺少href参数，所以它不起作用，只要我添加href="#"它就开始工作了。

如果使用ng-repeat，则无法在下拉菜单中导航

1 个答案: