如何在ng-repeat中使用$ index来启用类并显示DIV？

Question

我有一套<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-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>

Answer 1

这里的问题是ng-repeat创建自己的范围,因此当您这样做时selected=$index,selected在该范围内创建一个新的属性而不是改变现有的属性.要解决此问题,您有两种选择:

将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

Answer 2

正如johnnyynnoj所提到的,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>