当Modal中的大项目列表时,angular-ui-select的下拉列表的行为缓慢

Question

我在bootstrap模态窗口中使用angular-ui-select和~1500项的列表.

用户执行的每个操作都会延迟2秒.我试图通过使用'minimum-input-length'来提高性能,但过滤器不起作用.

Plunkr示例:https://plnkr.co/edit/H0kbeR4kHfZFjsBnpjBC ？ p = preview

我的Html:

<ui-select multiple sortable="true" ng-model="vm.selected" theme="select2" style="width: 100%;">
              <ui-select-match placeholder="Select...">{{ $item.name }}</ui-select-match>
              <ui-select-choices repeat="item in vm.items | filter: $select.search" minimum-input-length="2">
                <div ng-bind-html="item.name | highlight: $select.search"></div>
              </ui-select-choices>
            </ui-select>

1. 有谁知道如何提高性能？

2. 如何申请最小字符过滤？

   谢谢.

Answer 1

我使用LimitTo解决了这个问题,检查搜索长度:

limitTo: ($select.search.length <= 2) ? 0 : undefined"

完整的代码:

<ui-select-choices 
  repeat="item in ctrl.items | filter: $select.search | limitTo: ($select.search.length <= 2) ? 0 : undefined">