我有一组<li>要素。
<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>
当用户单击上方的地址元素之一时,则应设置selected的值并显示<DIV>以下元素之一:
<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>
这适用于前两种情况。
但是,它对于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"。
{{ selected }}
x in [4,5,6,7]
ng-repeat="answer in modal.data.answers"
有谁知道我该如何进行设置,以便li在正确的时间设置班级电流,并DIV在正确的时间为A0,A1,A2和A3 <li>以及<DIV>
li
DIV
这里的问题是ng- repeat创建自己的范围,所以当您执行selected=$index此操作时,将selected在该范围内创建一个新的属性,而不是更改现有属性。要解决此问题,您有两种选择:
ng- repeat
selected=$index
selected
将选定的属性更改为非原始属性(即对象或数组,使javascript查找原型链),然后在其上设置一个值:
$scope.selected = {value: 0}; <a ng-click="selected.value = $index">A{{$index}}</a>
plnkr
要么
使用$parent变量访问正确的属性。虽然不建议使用,因为它会增加示波器之间的耦合
$parent
<a ng-click="$parent.selected = $index">A{{$index}}</a>