如何在ng-repeat中使用$index来启用类并显示DIV？
如何在ng-repeat中使用$index来启用类并显示DIV？
提问于 2013-07-29 21:26:58
我有一组<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>当用户单击上面的address元素之一时，它应该设置selected的值，并在下面显示一个<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的颜色都变为红色。
如果你看这个柱塞，这是最好的展示：
http://plnkr.co/edit/7HMeObplaBkx5R0SntjY?p=preview
请注意，我在顶部添加了{{ selected }}作为调试辅助工具。此外，x in [4,5,6,7]只是用来模拟循环的。在现实生活中，我把这个叫做ng-repeat="answer in modal.data.answers"。
谁知道如何设置，以便在正确的时间设置li类current，并且在正确的时间为A0、A1、A2和A3 <li>和<DIV>显示DIV
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-07-29 21:40:50
这里的问题是ng-repeat创建了自己的作用域，所以当您执行selected=$index时，它会在该作用域中创建一个新的selected属性，而不是更改现有的属性。要解决此问题，您有两个选择：
将选定的属性更改为非原语(即对象或数组，这会使javascript查找原型链)，然后对其设置值：
$scope.selected = {value: 0};
<a ng-click="selected.value = $index">A{{$index}}</a>或
使用$parent变量访问正确的属性。尽管不太推荐，因为它增加了作用域之间的耦合
<a ng-click="$parent.selected = $index">A{{$index}}</a>Stack Overflow用户
发布于 2013-07-29 21:47:08
正如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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17925355
复制相关文章
相似问题