angular-ui-select's下拉列表在Modal中显示大列表时的缓慢行为

Question

我使用angular-ui-select在bootstrap模态窗口中列出了大约1500个项目。

用户执行的每个操作都有2秒的延迟。我试图通过使用"最小输入长度"来提高性能，但过滤器不起作用。

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">

Answer 2

因为我相信最小长度只会使用刷新功能。性能仍然是一个问题，因为有很多问题。

uiselect文档

刷新功能触发前所需的最小字符

Answer 3

如果您还使用orderBy排序列表(这会使其更慢)，请确保它在过滤器链中处于最后:

repeat="item in list | propsFilter: {name:$select.search} | limitTo:100 | orderBy:'name'">

现在它将只排序经过筛选的值，而不是整个列表。这在一定程度上提高了性能，但并不能解决潜在的问题。