angular-ui-select 的下拉列表在 Modal 中的项目列表很大时行为缓慢
Slow behaviour of angular-ui-select's drop down list when big list of items in Modal
我使用 angular-ui-select 和 bootstrap 模式 window 中约 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>
- 有谁知道如何提高性能?
如何应用最少字符过滤器?
谢谢。
因为我相信最小长度只适用于使用刷新功能。
性能仍然是一个问题,因为有很多问题。
Minimum characters required before refresh function is triggered
我使用 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">
如果您还使用 orderBy
对列表进行排序(这会进一步降低速度),请确保将其放在过滤器链的最后:
repeat="item in list | propsFilter: {name:$select.search} | limitTo:100 | orderBy:'name'">
现在它只会对过滤后的值进行排序,而不是对整个列表进行排序。这在一定程度上提高了性能,但没有解决根本问题。
我使用 angular-ui-select 和 bootstrap 模式 window 中约 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>
- 有谁知道如何提高性能?
如何应用最少字符过滤器?
谢谢。
因为我相信最小长度只适用于使用刷新功能。 性能仍然是一个问题,因为有很多问题。
Minimum characters required before refresh function is triggered
我使用 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">
如果您还使用 orderBy
对列表进行排序(这会进一步降低速度),请确保将其放在过滤器链的最后:
repeat="item in list | propsFilter: {name:$select.search} | limitTo:100 | orderBy:'name'">
现在它只会对过滤后的值进行排序,而不是对整个列表进行排序。这在一定程度上提高了性能,但没有解决根本问题。