如何使用 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，然后正确的不会显示，选择的值没有设置和所有的 n- 重复 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>

455820 次浏览
小开
最佳答案

这里的问题是，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

小开

正如 johnnyynnoj 提到的，重复创建了一个新的作用域。实际上，我会使用一个函数来设置值。见 混蛋

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>

提交答案