How can I use the $index inside a ng-repeat to enable a class and show a DIV?
AngularjsAngularjs Problem Overview
I have a set of <li>
elements.
<ul>
<li ng-class="{current: selected == 100}">
<a href ng:click="selected=100">ABC</a>
</li>
<li ng-class="{current: selected == 101}">
<a href ng:click="selected=101">DEF</a>
</li>
<li ng-class="{current: selected == $index }"
ng-repeat="x in [4,5,6,7]">
<a href ng:click="selected=$index">A{{$index}}</a>
</li>
</ul>
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 <DIV>
elements below:
<div ng:show="selected == 100">100</div>
<div ng:show="selected == 101">101</div>
<div ng-repeat="x in [4,5,6,7]" ng:show="selected == $index">{{ $index }}</div>
This works for the first two cases.
- When the user clicks ABC then the first
<DIV>
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 <li>
and <DIV>
Angularjs Solutions
Solution 1 - Angularjs
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};
<a ng-click="selected.value = $index">A{{$index}}</a>
or
Use the $parent
variable to access the correct property. Though less recommended as it increases coupling between scopes
<a ng-click="$parent.selected = $index">A{{$index}}</a>
Solution 2 - Angularjs
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 }}
<ul>
<li ng-class="{current: selected == 100}">
<a href ng:click="setSelected(100)">ABC</a>
</li>
<li ng-class="{current: selected == 101}">
<a href ng:click="setSelected(101)">DEF</a>
</li>
<li ng-class="{current: selected == $index }"
ng-repeat="x in [4,5,6,7]">
<a href ng:click="setSelected($index)">A{{$index}}</a>
</li>
</ul>
<div
ng:show="selected == 100">
100
</div>
<div
ng:show="selected == 101">
101
</div>
<div ng-repeat="x in [4,5,6,7]"
ng:show="selected == $index">
{{ $index }}
</div>