Using ng-repeat on an array within an array (AngularJS)

Question

I have an array called allSquads. It contains a series of objects which each contain a property called squad. I want to repeat through the contents of this squad array on every object in the allSquads array.

If I ng-repeat through allSquads[0].squad it works fine on that single array.

However, I want to continue repeating, like so:

allSquads[0].squad
allSquads[1].squad
allSquads[2].squad

etc.

My (incorrect) solution currently looks like this:

<div ng-repeat="player in allSquads[$index].squad">...</div>

I assumed $index in this case would represent the incrementally increasing integer, but it's not working. Can anyone help?

Thanks in advance...

Answer 1

I think what you would want to do instead is grab the value on the outer loop, and loop on the property of the parent value. Something along the lines of this.

<div ng-repeat="squad in allSquads">
 <div ng-repeat="player in squad.players">
 {{ player }}
 </div>
</div>

Is there any reason why you need to directly access the offset of 0, 1, 2 etc?

• Paulos3000: There is actually in this case. I'm running the repeat on a 'card', and I have very specific CSS set up for the card. Creating an extra div as an outer loop messes up the CSS, and I can't seem to find a solution to this.
• Bryan: Ok, so in your code, instead of using $index, try replacing that with $parent.$index, does that work?

Answer 2

Please look at this answer for a nested ng-repeat. This is how it would look like for you

<div ng-repeat="squad in allSquads">
 <div ng-repeat="player in squad">
 {{player}}
 </div>
</div>

EDIT

if you dont want to use nested loop, one way to go about it is making the 2d array into a 1d array similar to this example then iterating through that, after each concat push split point to show the next squad has started. so ['p1','p2',';;','p3',...] and ";;" would mark the split

• Paulos3000: Please see comment above.