javascript – 用于angularjs的ui-select中的Tab顺序

我是 angularjs的新手,我正在用它开发一个Web应用程序.我正在使用ui-select库来进行select2风格的下拉列表.我遇到了使用Tab键排序的简单用户体验问题.

我已经使用所有适当的tabindex值构建了一个表单.当我做正常的标签时,一切正常.但是,在我的任何一个下拉列表中,如果我键入一个选择的几个字母,这会导致选择最近的匹配条目,然后按Tab键,它不会像我期望的那样前进到下一个控件.

我正在寻找解决这个问题的方法.我在ui-select的文档中找不到任何可以解决此问题的内容.虽然首选适当的指令,但如果甚至有某种方法来设置自定义事件处理程序来完成所需的行为,我会很高兴.

我的目标是使这个表单适用于那些使用键盘高效并且不需要不必要地切换到鼠标的人.在我看来,这样的小中断在输入大量数据时会产生很大的不同.

我的ui-select代码由以下内容组成：

<ui-select id="EntityMfgr" reset-search-input="true" theme="select2" class="form-control" tabindex="2"
        data-ng-model="$parent.Edit.ManufacturerId" ng-required="true">
  <ui-select-match placeholder="- Please Select -">{{ $select.selected.Name }}</ui-select-match>
  <ui-select-choices repeat="mfgr.Id as mfgr in Manufacturers | anyFilter: { Name: $select.search }">
    <div data-ng-bind-html="mfgr.Name | highlight: $select.search"></div>
  </ui-select-choices>
</ui-select>

所以……这是一个错误吗？它有指令吗？我可以接通一个事件处理程序吗？怎么解决这个问题？

解决方法

通过使用ui-select的autofocus属性简单

<ui-select autofocus id="EntityMfgr" reset-search-input="true" theme="select2" class="form-control" tabindex="2"
        data-ng-model="$parent.Edit.ManufacturerId" ng-required="true">
  <ui-select-match placeholder="- Please Select -">{{ $select.selected.Name }}</ui-select-match>
  <ui-select-choices repeat="mfgr.Id as mfgr in Manufacturers | anyFilter: { Name: $select.search }">
    <div data-ng-bind-html="mfgr.Name | highlight: $select.search"></div>
  </ui-select-choices>
</ui-select>

此自动对焦将使您能够选择列表中第一个的项目.