ng-repeat running multiple times in one go?

Question

I got this quite simple

<table>
    <tr>
        <td ng-repeat="c in schedIdTableCtrl.calculateNumberOfColumns() track by $index">{{schedIdTableCtrl.calculateTime($index)}}</td>
    </tr>
</table>

And it returns an array with 504 elements.

But when I console.log() it says

(2) 504
(2) 504
504

So instead of running only once, it is running five times?

My javascript for this is simply

ctrl.calculateNumberOfColumns = () => {
    let columns = length / interval;
    console.log(columns);
    return new Array(columns);
};

score 1 · Answer 1 · edited May 23 '17 at 11:33

This is a normal behaviour, related to the Angular $digest cycle.

This cycle can be considered as a loop, during which Angular checks if there are any changes to all the variables watched by all the scopes. So if you have $scope.myVar defined in your controller and this variable was marked for being watched, then you are explicitly telling Angular to monitor the changes on myVar in each iteration of the loop. Source

If it possible to bind variable one time only in Angular, using ::. See this answer.

ng-repeat running multiple times in one go?

1 Answers1