Reputation: 6720
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
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
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>
Upvotes: 153