当模态

Question

我在引导模式窗口中使用angular-ui-select和~1500项的列表。

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

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

MY 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

我相信最小长度只能使用刷新功能。 由于存在许多问题，性能仍然是一个问题。

Documentation of uiselect

  

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

Answer 3

如果您还通过orderBy来订购列表（这将进一步降低速度），请确保将其排在过滤器链的最后：

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

现在它将仅对过滤后的值排序，而不对整个列表排序。这样可以提高性能，但不能解决潜在的问题。