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 · 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

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

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

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

User · 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   lt li class  tutorial title   tutorial active    ng-click  loadFromMenu  parent  index   ng-repeat  tutorial in section tutorials  gt        tutorial name    lt  li gt

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

Examples related to angularjs

Examples related to angularjs-ng-repeat