5

我使用angular-ui-select1500 个项目的列表。

用户执行的每个操作都有 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. 如何应用最小字符过滤器?

    谢谢。

4

3 回答 3

12

我使用 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">
于 2016-07-12T14:06:10.450 回答
1

我相信最小长度仅适用于使用刷新功能。性能仍然是一个问题,因为有很多问题。

uiselect 的文档

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

于 2016-06-28T15:38:33.790 回答
0

如果您还对列表进行排序orderBy(这将使其更慢),请确保将其放在过滤器链的最后:

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

现在它将仅对过滤后的值进行排序,而不是对整个列表进行排序。这在一定程度上提高了性能,但并不能解决根本问题。

于 2018-11-27T20:12:58.257 回答