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

Question

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

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

Anthony Chu · Accepted Answer · 2014-11-04 18:44:57Z

154

$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

answered Nov 4, 2014 at 18:44

Anthony Chu

37.6k10 gold badges85 silver badges72 bronze badges

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

6 Comments

trainoasis Over a year ago

Exactly what I wanted to know. Was a bit confused with the docs. Thank you

Skurpi Over a year ago

Worth noting is that it works for any javascript object available. I used it to create an alias for the outer loops $last boolean to make it available in the inner loop.

Devner Over a year ago

By very very very careful with this approach if you intend to delete any list items later on from the array. For example, if you delete any array items from the array things, then $index will update itself to reflect the new state of the array, but parentIndex will still point to the index of the deleted item. This will be huge problem when it comes to deletion. The parentIndex will reflect correctly once you have saved the state & refreshed the page i.e. you have to re-render the array list in order to show updated indices. I figured this after struggling with it for 3 days.

mulla.azzi Over a year ago

I have a complicated structure where in i am creating Forms using nested For Loops. For me 'ng-init' solved this issue. Thank you.

Push W Over a year ago

Cannot stress enough the importance of @Devner warning regarding using this approach if you are deleting objects from an array based on the index. It will not work. I struggled with the same issue

|

stol · Accepted Answer · 2024-05-09 12:59:31Z

0

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.

answered May 9, 2024 at 12:59

stol

9177 silver badges10 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related