Inline ngRepeat over array of objects

Question

I'm trying to write an ng-repeat with an array of objects, defining the array in the ng-repeat attribute, but for some reason it just repeats the output indefinitely.
I've boiled it down to the issue being to do with the last part; doing it inline.

<span ng-repeat="item in [{test:'a'}, {test:'b'}, {test:'c'}]">{{item.test}}</span>

A bunch of Error: [$rootScope:infdig] error's turn up in the console.
Interestingly, although I'm running 1.2, no matter which angular version I choose in jsfiddle, it renders it just fine.

But the console in jsfiddle is still flooded with errors Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!, doing this not only for arrays of objects, but arrays of arrays (test5).

My attempt at a workaround, test5 in that fiddle, saving the var, is really interesting because if you comment out the ng-repeat, it saves the scope variable fine without error.
Yet when you try to use that variable, that is where it dies. It's interesting because that is essentially test3, which goes off without a hitch.

So it must be an issue with the one thing I want to do, have the variable come from the html (instead of pre-existing in the js). So to kill the digest loop I tried switching the fiddle to v1.4 to use one time binding and it still fails (console error wise).

_{Other people seem to have hit the issue, but fixed it in their own library instead of reporting it upstream}

Is there any way for me to get this working properly?

do you call $evalAsync() or a similar function in your ng-repeat? — Asqan
– Asqan, Commented Jun 1, 2016 at 10:50
nope. The fiddles are right there, and that code snippet [at the start of the question] is all you need to see it happening. The only reason it displays 'right' in the fiddle is because the digest depth is capped so it errors right after the first iteration — Hashbrown
– Hashbrown, Commented Jun 1, 2016 at 10:55

Francisco Carmona · Accepted Answer · 2016-06-02 08:00:02Z

2

Have a look at this code.

<!--what I actually want to work-->
  <span ng-init="test10 = [{'text':'but'}, {'text':'this'}, {'text':'refuses'}, {'text':'to'}, {'text':'work'}]"></span>
  <span ng-repeat="item in test10">{{item.text}} </span>

With ng-init you can set a scope variable from the view.

Hope it helps!

answered Jun 2, 2016 at 8:00

Francisco Carmona

1,7111 gold badge10 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hashbrown Over a year ago

I can't believe I forgot about init, that's delicious. Thanks, works perfectly. Sucks that you can't put the ng-init in the same div, but at least I can make it a little cleaner as it allows multiple declarations per init

Collectives™ on Stack Overflow

Inline ngRepeat over array of objects

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related