ng-repeat runs twice (Angular)

Question

Consider the following ng-repeat:

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

Now the weird thing is that if I have an array with 10 items, the getName is called 20 times

Checkout this jsfiddle

Can someone explain why this is happening. Performance wise this might be a killing (I can imagine)

I am sorry but in your fiddle you have 4 items and getName is called 4 times. Correct ? — Christos, Nov 27 '14 at 20:23
No, it is called 8 times. I just tried it. Replace "console.log" with "alert" and you will see it. — deitch, Nov 27 '14 at 20:24
Yeah, if I hadn't seen the fiddle, I would not have believe it. :-) — deitch, Nov 27 '14 at 20:25
Check out this: http://stackoverflow.com/questions/9682092/databinding-in-angularjs/9693933#9693933 — Ivan Sivak, Nov 27 '14 at 20:26
@DanielA.White is it something about the directive running pre-link and post-link phases? Or am I barking up the wrong tree? — deitch, Nov 27 '14 at 20:27

Vadim · Accepted Answer · 2014-11-27T20:40:02.290

This is standard behavior for angular. Angular runs dirty checking on values and will run at least twice to ensure that the value hasn't changed.

EDIT:

In order to avoid this kind of behavior I would suggest mapping this name in the controller, this will only be evaluated once for each item:

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


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

ng-repeat runs twice (Angular)

1 Answers1

Linked

Related