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

我有一组

元素

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

100
101
{{$index}}

这适用于前两种情况

• 当用户单击ABC时，第一个
  显示100并将颜色更改为红色
• 单击DEF时，显示101，DEF变为红色

但是，它对A0、A1、A2和A3完全不起作用

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

这是最好的显示，如果你看这个Plunker：

注意，在顶部我添加了

{{{selected}}

作为顶部的调试辅助。[4,5,6,7]中的

x只是用来模拟一个循环。在现实生活中，我将其命名为
ng repeat=“answer In modal.data.answers”

有人知道我如何设置它，以便在正确的时间设置
li
类电流，并且
DIV
在正确的时间显示A0、A1、A2和A3
和
这里的问题是
ng repeat
创建了自己的范围，因此，当您执行
selected=$index
时，它会在该范围内创建一个新的
selected
属性，而不是更改现有属性。要解决此问题，您有两个选项：

将所选属性更改为非原语（即对象或数组，使javascript查找原型链），然后在该属性上设置一个值：

$scope.selected = {value: 0};

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

正如johnnyynnoj所提到的ng repeat创建了一个新的范围。事实上，我会使用一个函数来设置值。看

JS：

$scope.setSelected = function(selected) {
  $scope.selected = selected;
}

{{ 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>

HTML：

$scope.setSelected = function(selected) {
  $scope.selected = selected;
}

{{ 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>

{{selected}








100
101
{{$index}}
它们是解决问题的两种不同方法。想法是你可以选择你喜欢的。点击真的有用吗？我还以为是ng点击