在 ng-repeat 中使用自定义过滤器的 ng-options 性能问题答案

【问题标题】：Performance Issue in ng-options using custom filter in ng-repeat在 ng-repeat 中使用自定义过滤器的 ng-options 性能问题
【发布时间】：2017-02-08 14:56:16
【问题描述】：

我遇到了性能问题。我在 ng-repeat 下的 ng-options 中使用自定义过滤器。

示例代码下方：

<div ng-repeat="item in items">
<select ng-model="User[item.id]" ng-options="translatedKey.option as translatedKey.value|optionTranslater for translatedKey in item.translatedKeys">
</div>

在我的控制器中定义了 $scope.items，其中包含 100 个字段。在每个 Item 中，item.translatedKeys 包含 1 到 500 个字段。

现在我的问题在于每个 $digest optionTranslater 大约被调用 100*500 次。

它导致页面变慢。我必须在我的动态页面中使用自定义过滤器。在我的自定义过滤器中，我也使用角度转换器。

谁能提出一个更好的解决方案来提高性能。

提前致谢，

【问题讨论】：

在 ng_repeat 中使用单向绑定

标签： angularjs filter ng-repeat ng-options

【解决方案1】：

如果 item.translatedKeys 是静态的，我建议一次性绑定，例如：

<div ng-repeat="item in items">
<select ng-model="User[item.id]" ng-options="translatedKey.option as translatedKey.value|optionTranslater for translatedKey in ::item.translatedKeys">
</div>

-> 每次选择只会呈现一次选项。不是每次都在 $digest 循环中。

您可以将其与控制器中的翻译结合起来，如上述答案中所述。 -> 你会得到更快的结果。现在所有选项的翻译次数与选择次数一样多。

【讨论】：

【解决方案2】：

一旦发生变化，Angular 会在每个 $digest 周期运行每个过滤器（包括日期过滤器）两次。这会影响性能。第一次运行来自 $$watchers 检测任何更改，第二次运行是查看是否还有需要更新值的进一步更改。

如果您可以将 DOM 过滤器更改为使用 $filter 提供程序，您可以使用它在控制器中运行过滤器，然后再将它们解析为 DOM，您可以在将数据发送到视图之前对其进行预处理，从而避免解析步骤DOM 和理解内联过滤器语法。这可能会提高性能。它会是这样的：

$scope.translatedKey = $filter('optionTranslater')($scope.translatedKey);

【讨论】：