How can I use the index inside a ng-repeat to enable a class and show a DIV

Question

I have a set of  lt li gt  elements    lt ul gt     lt li ng-class   current  selected    100   gt        lt a href ng click  selected 100  gt ABC lt  a gt     lt  li gt     lt li ng-class   current  selected    101   gt        lt a href ng click  selected 101  gt DEF lt  a gt     lt  li gt     lt li ng-class   current  selected     index           ng-repeat  x in  4 5 6 7   gt        lt a href ng click  selected  index  gt A   index   lt  a gt     lt  li gt   lt  ul gt    When a user clicks on one of the address elements above then then it should  set the value of selected and show one of the  lt DIV gt  elements below    lt div  ng show  selected    100  gt 100 lt  div gt   lt div  ng show  selected    101  gt 101 lt  div gt   lt div ng-repeat  x in  4 5 6 7   ng show  selected     index  gt     index    lt  div gt    This works for the first two cases     When the user clicks ABC then the first  lt DIV gt  shows 100 and changes color to red   When DEF is clicked then 101 shows and DEF changes to red     However it does not work at all for A0  A1  A2 and A3   When a user clicks A0  A1  A2 or A3 then the correct  does not show  the selected value is not set and the color of ALL the ng-repeat A0 A1 A2 and A3 turn to red    This is best shown if you look at this Plunker   http   plnkr co edit 7HMeObplaBkx5R0SntjY p preview  Note that at the top I have added    selected    as a debug aid at the top  Also the x in  4 5 6 7  are just meant to simulate a loop  In real life I have this as ng-repeat  answer in modal data answers    Does anyone know how I can set this up so that the li class current is set at the right time and the DIV shows at the right time for the A0  A1  A2 and A3  lt li gt  and  lt DIV gt

User · Answer

As johnnyynnoj mentioned ng-repeat creates a new scope  I would in fact use a function to set the value  See plunker  JS    scope setSelected   function selected       scope selected   selected      HTML      selected      lt ul gt     lt li ng-class   current  selected    100   gt        lt a href ng click  setSelected 100   gt ABC lt  a gt     lt  li gt     lt li ng-class   current  selected    101   gt        lt a href ng click  setSelected 101   gt DEF lt  a gt     lt  li gt     lt li ng-class   current  selected     index           ng-repeat  x in  4 5 6 7   gt        lt a href ng click  setSelected  index   gt A   index   lt  a gt     lt  li gt   lt  ul gt    lt div     ng show  selected    100  gt    100          lt  div gt   lt div     ng show  selected    101  gt    101          lt  div gt   lt div ng-repeat  x in  4 5 6 7      ng show  selected     index  gt        index             lt  div gt

User · Answer

The issue here is that ng-repeat creates its own scope  so when you do selected  index it creates a new a selected property in that scope rather than altering the existing one  To fix this you have two options   Change the selected property to a non-primitive  ie object or array  which makes javascript look up the prototype chain  then set a value on that    scope selected    value  0     lt a ng-click  selected value    index  gt A   index   lt  a gt    See plunker  or  Use the  parent variable to access the correct property  Though less recommended as it increases coupling between scopes   lt a ng-click   parent selected    index  gt A   index   lt  a gt    See plunker

[angularjs] How can I use the $index inside a ng-repeat to enable a class and show a DIV?

Examples related to angularjs