通过单向绑定的过滤功能提高自定义 Angular 下拉菜单中的 Angular 性能

Question

我有一个自定义的角度组件，它用作具有过滤功能的下拉选择元素。输入是具有几个角度指令的基本输入元素：

 <input type="text" class="form-control" ng-change="ctrl.filterTextChangeLocal($event)" ng-model="ctrl.ngModelValue" ng-click="ctrl.openDropdown($event)" />

上面的输入负责打开下拉菜单并允许用户输入，因为用户输入下拉元素中的数据会被相应地过滤。过滤是在控制器中使用基本角度过滤器完成的：

 ctrl.filteredItems = ctrl.$filter("filter")(ctrl.items, ctrl.ngModelValue);

下拉元素如下所示：

 <table class="table">
        <thead>
            <tr>
                <th ng-repeat="heading in ctrl.gridColumnHeaders" class="text-center">{{heading}}</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in ctrl.filteredItems" ng-mousedown="ctrl.onSelectedLocal(row, $event)">
                <td ng-repeat="value in ctrl.sort(row) track by $index" class="text-center">
                    {{value}}
                </td>
            </tr>
        </tbody>
    </table>

一切正常，但随着传递到组件中的项目数量增加（100 多个项目）并且下拉列表相应增加，过滤速度很慢。这意味着当我输入一个字符时，下拉列表的过滤会滞后。

我知道 Angular 过滤器的性能不是最好的，但我相信大部分延迟来自 ng-repeat 和双向绑定。我不能像这样在 ng-repeat 内部创建单向绑定：

  ng-repeat="value in ::ctrl.filteredItems" 

因为我失去了过滤的绑定。只会在值上设置单向绑定来提高性能：

  {{::value}}

或者在这里提高性能的最佳方法是什么？确实需要尝试并留在 Angular 框架中，因此寻找 Angular 解决方案。

谢谢

Answer 1

您是否尝试过简单地申请：

one-time-binding="true"

直接在 ng-repeat 上？

通常对 100 多个元素进行双向绑定不会影响性能 - 但是如果你的循环中有一个嵌套循环，那么..