У меня есть набор <li>
элементов.
<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>
Когда пользователь нажимает на один из элементов адреса выше, тогда он должен установить значение selected и показать один из <DIV>
элементов ниже:
<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>
Это работает для первых двух случаев.
- Когда пользователь нажимает ABC, то первый
<DIV>
показывает 100 и меняет цвет на красный. - При нажатии DEF отображается 101, и DEF становится красным.
Однако это не работает вообще для A0, A1, A2 и A3
- Когда пользователь нажимает A0, A1, A2 или A3, правильное значение не отображается, выбранное значение не устанавливается, и цвет ВСЕХ повторяющихся n0, A1, A2 и A3 становится красным.
Это лучше всего показано, если вы посмотрите на этот Plunker:
http://plnkr.co/edit/7HMeObplaBkx5R0SntjY?p=preview
Обратите внимание, что вверху я добавил {{ selected }}
в качестве средства отладки вверху. Кроме того, x in [4,5,6,7]
они просто предназначены для имитации цикла. В реальной жизни у меня есть это как ng-repeat="answer in modal.data.answers"
.
Кто-нибудь знает, как я могу настроить это так, чтобы li
ток класса был установлен в нужное время и DIV
показывал в нужное время для A0, A1, A2 и A3 <li>
и<DIV>