一尘不染

如何在ng-repeat中使用$ index启用类并显示DIV?

angularjs

我有一组<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  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在正确的时间设置班级电流,并DIV在正确的时间为A0,A1,A2和A3 <li>以及<DIV>


阅读 247

收藏
2020-07-04

共1个答案

一尘不染

这里的问题是ng- repeat创建自己的范围,所以当您执行selected=$index此操作时,将selected在该范围内创建一个新的属性,而不是更改现有属性。要解决此问题,您有两种选择:

将选定的属性更改为非原始属性(即对象或数组,使javascript查找原型链),然后在其上设置一个值:

$scope.selected = {value: 0};

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

plnkr

要么

使用$parent变量访问正确的属性。虽然不建议使用,因为它会增加示波器之间的耦合

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

plnkr

2020-07-04