passing 2 $index values within nested ng-repeat
Each ng-repeat creates a child scope with the passed data, and also adds an additional $index
variable in that scope.
So what you need to do is reach up to the parent scope, and use that $index
.
See http://plnkr.co/edit/FvVhirpoOF8TYnIVygE6?p=preview
<li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu($parent.$index)" ng-repeat="tutorial in section.tutorials"> {{tutorial.name}}</li>
Way more elegant solution than $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>
What about using this syntax (take a look in this plunker). I just discovered this and it's pretty awesome.
ng-repeat="(key,value) in data"
Example:
<div ng-repeat="(indexX,object) in data"> <div ng-repeat="(indexY,value) in object"> {{indexX}} - {{indexY}} - {{value}} </div></div>
With this syntax you can give your own name to $index
and differentiate the two indexes.