Как я могу использовать $index внутри ng-repeat, чтобы включить класс и показать 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, то правильное не отображается, выбранное значение не установлено, а цвет ALL ng-repeat 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>

Ответ 1

Проблема здесь в том, что ng-repeat создает свою собственную область, поэтому, когда вы делаете selected=$index, она создает новое свойство selected в этой области действия, а не изменяя существующее. Чтобы исправить это, у вас есть два варианта:

Измените выбранное свойство на не-примитивный (т.е. объект или массив, который заставляет javascript искать цепочку прототипов), затем установите для него значение:

$scope.selected = {value: 0};

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

См. plunker

или

Используйте переменную $parent для доступа к правильному свойству. Хотя менее рекомендуется, так как увеличивает связь между областями

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

См. plunker

Ответ 2

Как упоминал Джоннинный, ng-repeat создает новую область. На самом деле я бы использовал функцию для установки значения. См. 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>