Angular ng-repeat - creating collection dynamically

Question

The problem occurs when trying to ng-repeat over dynamically created collection: Angular is going in to loop with 10 $digest() iterations reached. Aborting! error

I have simplified the problem to minimum with this example

<body ng-init='a = [1, 2, 3]'>
    <div ng-repeat="item in a.reverse()">{{item}}</div>
</body>

and here is it working copy in Plunkr (View shows correct result, but in console you will see errors mentioned above. More complicated examples fail completely)

Considered [1, 2, 3] could be array of objects, if it may make any difference

So questions are why is it so, and is there an easy way to come over this?

Thanks

take a look at this link stackoverflow.com/questions/15266671/… — Punith Jain
– Punith Jain, Commented Dec 31, 2014 at 13:13
Current example is broken because of transformation I chose to show the problem, .reverse(), is changing the array itself. Var a is tracking, .reverse() is changing it, $digest is going, .reverse() is going and on and on. Example need to be a little bit complex and accent on other detail, so I would create different question. Thanks everyone and sorry for not worked out question — Agat
– Agat, Commented Dec 31, 2014 at 15:16

Community · Accepted Answer · 2017-05-23 11:50:56Z

The problem is that you're calling the reverse function in ng-repeat and that $apply and $digest many times. If you're using AngularJS 1.3.x and your data will be created once and will not change at run-time, you can use bind-once property by typing the following in any of ng-(directives)

<body ng-init='a = [1, 2, 3].reverse()'>
   <div ng-repeat="item in ::a">{{item}}</div> 
</body>

prefixing a with :: tells AngularJS that this array or this variable won't be changed, so it will release the $watch function from it and won't consume $digest too many times.

For more information about bind once feature, check this one-time-binding

For the reversing technique itself if it's dynamically created and frequently changed, you can use one of the following approaches:

<body ng-init='a = [1, 2, 3]'>
  <div ng-repeat="item in a.slice().reverse()">{{item}}</div>
</body>

or also you can wrap this into filter, you can use it as follows:

app.filter('reverse', function() {
  return function(items) {
    return items.slice().reverse();
  };
});

and in the HTML type the following line of code:

<body ng-init='a = [1, 2, 3]'>
  <div ng-repeat="item in a | reverse">{{item}}</div>
</body>

for ordering array of objects in general, you should use the following:

<body ng-init='a = [{id: 1}, {id: 2}, {id: 3}]'>
  <div ng-repeat="item in a | orderBy:'id':true">{{item.id}}</div>
</body>

using true for reverse ordering and false for ascending ordering.

You can check also this question and answer for more information: angular ng-repeat in reverse

rmuller · Accepted Answer · 2014-12-31 12:53:01Z

2

It is because of you calling the reverse() function in the ng-repeat.

Like this it works without errors

<body ng-init='a = [1, 2, 3].reverse()'>
   <div ng-repeat="item in a">{{item}}</div> 
</body>

answered Dec 31, 2014 at 12:53

rmuller

1,83712 silver badges12 bronze badges

3 Comments

David Hughes Over a year ago

See stackoverflow.com/questions/19693410/… for more info

Agat Over a year ago

As I said, this is simplified example, and creation on new collection right inside ng-repeat is a critical part. In my real problem, for example, it was function that except collection and reducing it to new collection

Blazemonger Over a year ago

Then you need to give us a better example to analyze.

Nicola Ferraro · Accepted Answer · 2014-12-31 12:56:14Z

1

This happens because angular uses a fixed-point model for rendering the objects in the page. When, after applying one iteration, all the "digest" of the objects do not change, the model is considered stable and it is rendered in the view. If the model is not stable after x=10 iterations, then an error is raised. In your case, the function reverse() generate always a new model object with a different digest.

For your particular problem, you can use ng-repeat with the orderBy clause (assuming that the model object is an array).

In general, when you have a main model and many derived sub-models, it is good practice to derive the sub-models using $watch expressions in a "reactive" fashion.

answered Dec 31, 2014 at 12:56

Nicola Ferraro

4,2196 gold badges32 silver badges61 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:28:27Z

0

using a function for ng-repeat is not a prefer way, you have to be carefully when using function for ng-repeat items. please check this post.

How to Loop through items returned by a function with ng-repeat?

edited May 23, 2017 at 12:28

CommunityBot

11 silver badge

answered Dec 31, 2014 at 15:16

selami

13 bronze badges

Collectives™ on Stack Overflow

Angular ng-repeat - creating collection dynamically

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related