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>每个类别的a中打印出结果。

<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 : //html" target="_blank">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/