Як я можу використовувати індекс $ всередині ng-повтору, щоб увімкнути клас та показати DIV?

У мене є набір <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>

Коли користувач натискає один з елементів адреси вище, тоді він повинен встановити значення вибраного та показати один із <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, правильне не відображається, вибране значення не встановлюється, а колір ВСЕ ng-повторів A0, 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>

Проблема тут полягає в тому, що він ng-repeatстворює власну сферу, тож коли ви selected=$indexце робите, ви створюєте нову selectedвластивість у такому обсязі, а не змінюєте існуючу. Щоб виправити це, у вас є два варіанти:

Змініть вибране властивість на непримітивний (тобто об'єкт або масив, який змушує JavaScript шукати ланцюжок прототипу), а потім встановіть значення для цього:

$scope.selected = {value: 0};

<a ng-click="selected.value = $index">A{{$index}}</a>

Див. Плункер

або

Використовуйте $parentзмінну для доступу до правильної властивості. Хоча і менше рекомендується, оскільки це збільшує з'єднання між областями

<a ng-click="$parent.selected = $index">A{{$index}}</a>

Див. Плункер

Як згадується johnnyynnoj, ng- repet створює новий розмах. Я б фактично використовував функцію для встановлення значення. Див. Плункер

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>