如果使用 ng-repeat，则无法浏览下拉菜单

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，则无法浏览下拉菜单

Can't navigate through drop-down menu if using ng-repeat

angularjs

angular-ui