Question

我正面临性能问题。我在ng-options中使用自定义过滤器，这些过滤器在ng-repeat下。

示例代码下方：

<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>

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

现在我的问题出现在每个$ digest选项中，Translater被称为约100 * 500次。

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

任何人都可以建议一个更好的解决方案来提高性能。

提前致谢，

Answer 1

一旦某些内容发生变化，Angular每个$ digest周期运行两次过滤器（包括日期过滤器）两次。这会对性能造成影响。第一次运行是从$$观察者检测到任何变化，第二次运行是为了查看是否还有需要更新值的更改。

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

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

Answer 2

如果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>

- ＆GT;每个选项只会呈现一次选项。不是每次都在$ digest循环中。

您可以将其与控制器中的翻译结合使用，如上面的答案中所述。 - ＆GT;你会得到更快的结果。现在所有选项都被翻译了多次。

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

2 个答案: