passing 2 $index values within nested ng-repeat passing 2 $index values within nested ng-repeat angularjs angularjs

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>

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


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.