AngularJS’ng-filter’在?1000个元素的数组上非常慢

发布时间：2020-12-17 08:38:08 所属栏目：安全来源：网络整理

导读：我有一个简单的 input搜索过滤器为AngularJS中的项目名称列表设置。我的列表看起来像这样： var uniqueLists = { category1: ['item1','item2','item3' ... 'item180' ],// Real list contains ~180 items category2: ['itemA','itemB','itemC' ... 'itemZZ

我有一个简单的< input>搜索过滤器为AngularJS中的项目名称列表设置。

我的列表看起来像这样：

var uniqueLists = {
    category1: ['item1','item2','item3' ... 'item180' ],// Real list contains ~180 items
    category2: ['itemA','itemB','itemC' ... 'itemZZZ' ],// Real list contains ~1080 items
    category3: ['otheritem1','otheritem2','otheritem3' ]  // Real list contains 6 items
  }

我在Angular中遍历该列表，并将结果打印在< ul>为每个类别。

<div ng-repeat="(key,val) in uniqueLists">
    <form ng-model="uniqueLists[index][0]">
        <input ng-model="searchFilter" type="text" />
            <ul>
                <li ng-repeat="value in val | filter: searchFilter">
                    <label>
                         <input type="checkbox" ng-model="selectedData[key][value]" />
                        {{value}}
                    </label>
                </li>
            </ul>
    </form>
</div>

为了清楚起见，selectedData看起来像这样：

var selectedData = {category1: [item1:true],category2: [],category3: []); // if 'item1's checkbox is checked.

这个列表工作正常，虽然过滤器是相当滞后，即使在我非常快的电脑。在输入中键入一个字母需要1-2秒的时间来更新列表。

我知道这可能是因为我一次过滤大约1000项，但我还没有看到任何讨论这一点。

有什么办法让过滤器更好的性能吗？

过滤器方法的主要问题是，在每次更改dom操作时，所以它不是过滤器，但缓慢，但后果。另一种方法是使用类似：

ng-show="([item] | filter:searchFilter).length > 0"

对重复的元素。

从@OverZealous中借出一些代码，您可以使用以下来比较行为：

> filter：http://jsbin.com/fuwadanu/1/
> ng-show：http://jsbin.com/xajehulo/1/

更新：使用Angular v1.2通过语法来跟踪。这也有助于这样的问题。如果元素有一些唯一的属性，可以使用：

ng-repeat="item in items | filter:searchFilter track by item.id"

其中item.id必须在所有项目之间是唯一的。跟踪只有那些dom元素将被删除，这不再是最终列表中，其他人将被记住。而无轨道的整个列表是每次重绘。简而言之：更少的dom操作=更快的重画。

> track by：http://jsbin.com/dufasego/1/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!