trainoasis
trainoasis

Reputation: 6720

AngularJS: ng-repeat track by $index inside nested loops

I need a second $index for my nested ng-repeat loop. How and where should I put it?

AngularJS site says

Creating aliases for these properties is possible with ngInit. This may be useful when, for instance, nesting ngRepeats.

<div ng-repeat="person in persons track by $index">
    <div ng-repeat="something in array track by $index2"> <!-- where to init this and how to manage it?-->

If I use $index again, it seems to work but I am not sure this is the right thing? I am sure there is an easy and correct way of doing it, I just wasn't able to find an example.

Thanks

Upvotes: 63

Views: 58838

Answers (2)

stol
stol

Reputation: 917

While ng-init is one way to do it, as seen in the accepted answer, if you plan to manipulate the array, remove elements, or add elements in arbitrary indexes, the parentIndex method described above won't work nicely.

I prefer the $parent.$index way to refer to the actual parent index. Careful though, if the inner ng-repeat also has ng-if you will see that $parent.$index is always the same as $index and to address that one should use $parent.$parent.$index- a bit ugly, but it works.

Upvotes: 0

Anthony Chu
Anthony Chu

Reputation: 37520

$index will refer to the index on the innermost ngRepeat scope, so if that's what you need, you can just use it.

What the docs is describing is a scenario where you need access to $index in the parent ngRepeat. You can get it in a couple of ways: One is to use $parent, and another is to use ngInit, as the Angular docs suggested. Here's an example...

<li ng-repeat="thing in things" ng-init="parentIndex = $index">
    {{ $index }}
    <ul>
        <li ng-repeat="value in thing.values">
            {{ value }} 
            {{ $index }} <!-- inner $index -->
            {{ $parent.$index }} <!-- parent $index -->
            {{ parentIndex }} <!-- also parent $index -->
        </li>
    </ul>
</li>

Fiddle

Upvotes: 153

Related Questions