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

Question

我有一个简单的<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.

这个列表工作得很好，尽管 filter即使在我的速度相当快的计算机上，也是相当滞后的。在输入框中输入一个字母需要 1-2 秒，列表才会更新。

我知道这可能是因为我一次过滤了大约 1000 个项目，但我在其他地方没有看到任何对此的讨论。

有什么方法可以让过滤器获得更好的性能吗？

Answer 1

过滤器方法的主要问题是，每次更改都会对 dom 进行操作，因此速度慢的不是过滤器，而是后果。另一种方法是使用类似的东西:

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

在重复元素上。

借用@OverZealous的一些代码，您可以使用以下内容来比较行为:

• 过滤器:http://jsbin.com/fuwadanu/1/
• ng-show:http://jsbin.com/xajehulo/1/

<小时/>

更新:Angular v1.2 引入了 track by 语法。这也有助于解决此类问题。如果元素具有一些独特的属性，则可以使用:

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

其中 item.id 在所有项目中必须是唯一的。使用track by，只有那些不再出现在最终列表中的dom元素将被删除，其他元素将被记住。而如果没有track by，整个列表每次都会重绘。简而言之:更少的 dom 操作 = 更快的重绘。

• 追踪:http://jsbin.com/dufasego/1/