javascript - ng-repeat 运行两次(Angular)

Question

这个问题已经有答案了:

Why is ng-style function applied twice? (2 个回答)

已关闭 8 年前。

考虑以下 ng-repeat:

<p ng-repeat="item in items">
    <span ng-bind="getName(item)"></span>
</p>

现在奇怪的是，如果我有一个包含 10 个项目的数组，则 getName 会被调用 20 次

看看这个 jsfiddle

有人可以解释为什么会发生这种情况吗？就性能而言，这可能是一场杀戮(我可以想象)

Answer 1

这是 Angular 的标准行为。 Angular 对值运行脏检查，并且至少运行两次以确保值没有更改。

编辑:

为了避免这种行为，我建议在 Controller 中映射此名称，每个项目只会评估一次:

function MyCtrl($scope) {
    ...
    $scope.items.forEach(function(item) {
        item.name = getName(item);
    });
    ...
});


<p ng-repeat="item in items">
     <span>{{item.name}}</span>
</p>