passing 2 index values within nested ng-repeat

Question

So I have an ng-repeat nested within another ng-repeat in order to build a nav menu  On each  lt li gt  on the inner ng-repeat loop I set an ng-click which calls the relevant controller for that menu item by passing in the  index to let the app know which one we need  However I need to also pass in the  index from the outer ng-repeat so the app knows which section we are in as well as which tutorial    lt ul ng-repeat  section in sections  gt       lt li  class  section title   section active     gt            section name        lt  li gt       lt ul gt           lt li class  tutorial title   tutorial active    ng-click  loadFromMenu  index   ng-repeat  tutorial in section tutorials  gt                tutorial name            lt  li gt       lt  ul gt   lt  ul gt    here s a Plunker http   plnkr co edit bJUhI9oGEQIql9tahIJN p preview

User · Accepted Answer

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>

User · Answer

Just to help someone who get here    You should not use  parent  index as it s not really safe  If you add an ng-if inside the loop  you get the  index messed   Right way     lt table gt       lt tr ng-repeat  row in rows track by  index  ng-init  rowIndex    index  gt           lt td ng-repeat  column in columns track by  index  ng-init  columnIndex    index  gt              lt b ng-if  rowIndex    columnIndex  gt    rowIndex   -   columnIndex    lt  b gt             lt small ng-if  rowIndex    columnIndex  gt    rowIndex   -   columnIndex    lt  small gt            lt  td gt       lt  tr gt     lt  table gt    Check  plnkr co 52oIhLfeXXI9ZAynTuAJ

User · Answer

When you are dealing with objects  you want to ignore simple id s as much as convenient   If you change the click line to this  I think you will be well on your way    lt li class  tutorial title   tutorial active    ng-click  loadFromMenu tutorial   ng-repeat  tutorial in section tutorials  gt    Also  I think you may need to change  class  tutorial title   tutorial active      to something like  ng-class  tutorial title   tutorial active      See http   docs angularjs org misc faq and look for ng-class

User · Answer

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    lt div ng-repeat   indexX object  in data  gt       lt div ng-repeat   indexY value  in object  gt           indexX   -   indexY   -   value        lt  div gt   lt  div gt    With this syntax you can give your own name to  index and differentiate the two indexes

User · Answer

Just use ng-repeat   sectionIndex  section  in sections   and that will be useable on the next level ng-repeat down    lt ul ng-repeat   sectionIndex  section  in sections  gt       lt li  class  section title   section active     gt            section name        lt  li gt       lt ul gt           lt li ng-repeat  tutorial in section tutorials  gt                tutorial name    Your section index is   sectionIndex            lt  li gt       lt  ul gt   lt  ul gt

User · Answer

Way more elegant solution than  parent  index is using ng-init    lt ul ng-repeat  section in sections  ng-init  sectionIndex    index  gt       lt li  class  section title   section active     gt            section name        lt  li gt       lt ul gt           lt li class  tutorial title   tutorial active    ng-click  loadFromMenu sectionIndex   ng-repeat  tutorial in section tutorials  gt                tutorial name            lt  li gt       lt  ul gt   lt  ul gt    Plunker  http   plnkr co edit knwGEnOsAWLhLieKVItS p info

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

Examples related to angularjs

Examples related to angularjs-ng-repeat