如何使用ng-repeat中的$ index启用类并显示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时，不显示正确的值，select的值不会被设置，所有ng-repeat A0，A1，A2和A3的颜色将变为红色。
这是最好的显示，如果你看看这个Plunker：
请注意，在顶部，我添加了{{ selected }}作为顶部的debugging帮助。 另外x in [4,5,6,7]中的x in [4,5,6,7]只是为了模拟一个循环。 在现实生活中，我有这个ng-repeat="answer in modal.data.answers" 。
有谁知道我可以如何设置，以便listream设置在正确的时间， DIV显示在正确的时间为A0，A1，A2和A3 <li>和<DIV>
这里的问题是， ng-repeat创build了自己的作用域，所以当你selected=$index它在该作用域中创build一个新的selected属性，而不是改变现有的属性。 要解决这个问题，你有两个select：
将选定的属性更改为非原始（即对象或数组，使JavaScript查找原型链），然后设置一个值：
$scope.selected = {value: 0}; <a ng-click="selected.value = $index">A{{$index}}</a>
见闯入者
要么
使用$parentvariables来访问正确的属性。 虽然不太推荐，因为它增加了示波器之间的耦合
<a ng-click="$parent.selected = $index">A{{$index}}</a>
见闯入者
正如johnnyynnoj提到ng-repeat创build一个新的范围。 我实际上会使用一个函数来设置值。 见闯入者
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>
