169

我有一组<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 的颜色变为红色。

如果您查看此 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>

4

2 回答 2

205

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

于 2013-07-29T13:40:50.397 回答
30

正如 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>
于 2013-07-29T13:47:08.450 回答