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

Question

我有一套<代码>

<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  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时，第一个<代码>

然而，它根本不适用于A0、A1、A2和A3

• 当用户单击A0、A1、A2或A3时，则不会显示正确的值，不会设置所选值，并且所有ng重复A0、A1、A2和A3的颜色变为红色

如果你看这只扑克牌，这是最好的展示：

http://plnkr.co/edit/7HMeObplaBkx5R0SntjY?p=preview

请注意，我在顶部添加了{{{selected}}作为调试辅助工具。[4,5,6,7]中的x仅用于模拟循环。在现实生活中，我把它看作是模态数据回答。

有人知道我如何设置它，以便在正确的时间设置li类电流，并且在正确的时间显示A0、A1、A2和A3类电流

Answer 1

正如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>

Answer 2

这里的问题是ng-重复创建了自己的范围，因此当您执行选择=$index时，它会在该范围内创建一个新的选择属性，而不是更改现有的。要解决这个问题，您有两个选项：

将所选属性更改为非原语（即对象或数组，它使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