Access index of the parent ng-repeat from child ng-repeat

JavascriptAngularjsAngularjs Ng-Repeat

Javascript Problem Overview


I want to use the index of the parent list (foos) as an argument to a function call in the child list (foos.bars).

I found a post where someone recommends using $parent.$index, but $index is not a property of $parent.

How can I access the index of the parent ng-repeat?

<div ng-repeat="f in foos">
  <div>
    <div ng-repeat="b in foos.bars">
      <a ng-click="addSomething($parent.$index)">Add Something</a>
    </div>
  </div>
</div>

Javascript Solutions


Solution 1 - Javascript

My example code was correct and the issue was something else in my actual code. Still, I know it was difficult to find examples of this so I'm answering it in case someone else is looking.

<div ng-repeat="f in foos">
  <div>
    <div ng-repeat="b in foos.bars">
      <a ng-click="addSomething($parent.$index)">Add Something</a>
    </div>
  </div>
</div>

Solution 2 - Javascript

According to ng-repeat docs http://docs.angularjs.org/api/ng.directive:ngRepeat, you can store the key or array index in the variable of your choice. (indexVar, valueVar) in values

so you can write

<div ng-repeat="(fIndex, f) in foos">
  <div>
    <div ng-repeat="b in foos.bars">
      <a ng-click="addSomething(fIndex)">Add Something</a>
    </div>
  </div>
</div>

One level up is still quite clean with $parent.$index but several parents up, things can get messy.

Note: $index will continue to be defined at each scope, it is not replaced by fIndex.

Solution 3 - Javascript

Take a look at my answer to a similar question.
By aliasing $index we do not have to write crazy stuff like $parent.$parent.$index.


Way more elegant solution whan $parent.$index is using ng-init:

<ul ng-repeat="section in sections" ng-init="sectionIndex = $index">
    <li  class="section_title {{section.active}}" >
        {{section.name}}
    </li>
    <ul>
        <li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu(sectionIndex)" ng-repeat="tutorial in section.tutorials">
            {{tutorial.name}}
        </li>
    </ul>
</ul>

Plunker: http://plnkr.co/edit/knwGEnOsAWLhLieKVItS?p=info

Solution 4 - Javascript

You can also get control of grand parent index by the following code

$parent.$parent.$index

Solution 5 - Javascript

You can simply use use $parent.$index .where parent will represent object of parent repeating object .

Solution 6 - Javascript

$parent doesn't work if there are multiple parents. instead of that we can define a parent index variable in init and use it

<div data-ng-init="parentIndex = $index" ng-repeat="f in foos">
  <div>
    <div data-ng-init="childIndex = $index" ng-repeat="b in foos.bars">
      <a ng-click="addSomething(parentIndex)">Add Something</a>
    </div>
  </div>
</div>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionCoder1View Question on Stackoverflow
Solution 1 - JavascriptCoder1View Answer on Stackoverflow
Solution 2 - JavascriptSamuli UlmanenView Answer on Stackoverflow
Solution 3 - JavascriptvucalurView Answer on Stackoverflow
Solution 4 - JavascriptAkRoyView Answer on Stackoverflow
Solution 5 - JavascriptVivek PandayView Answer on Stackoverflow
Solution 6 - JavascriptGajanan PrasadView Answer on Stackoverflow