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

I have a set of <li> elements.

我有一组

元素。

元素。

<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>

When a user clicks on one of the address elements above then then it should, set the value of selected and show one of the <DIV> elements below:

当用户单击上面的一个地址元素时，它应该设置所选的值，并显示下面的

元素之一:

<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>

This works for the first two cases.

这适用于前两种情况。

• When the user clicks ABC then the first <DIV> shows 100 and changes color to red.
• 当用户单击ABC时，第一个
  显示100并将颜色改为红色。
• When DEF is clicked then 101 shows and DEF changes to red.
• 当DEF被单击时，将显示101并将DEF更改为红色。

However it does not work at all for A0, A1, A2 and A3

但是它对A0 A1 A2 A3完全不起作用

• When a user clicks A0, A1, A2 or A3 then the correct does not show, the selected value is not set and the color of ALL the ng-repeat A0,A1,A2 and A3 turn to red.
• 当用户单击A0、A1、A2或A3时，没有显示正确的值，选择的值没有设置，所有ng-repeat A0、A1、A2和A3的颜色都变为红色。

This is best shown if you look at this Plunker:

这是最好的展示如果你看这个活塞:

http://plnkr.co/edit/7HMeObplaBkx5R0SntjY?p=preview

http://plnkr.co/edit/7HMeObplaBkx5R0SntjY?p=preview

Note that at the top I have added {{ selected }} as a debug aid at the top. Also the x in [4,5,6,7] are just meant to simulate a loop. In real life I have this as ng-repeat="answer in modal.data.answers".

注意，在顶部，我添加了{{selected}}作为顶部的调试辅助。[4,5,6,7]中的x只是用来模拟一个循环。在现实生活中，我把它叫做ng-repeat=“modal.data.answers”。

Does anyone know how I can set this up so that the li class current is set at the right time and the DIV shows at the right time for the A0, A1, A2 and A3 <li> and <DIV>

有人知道我如何设置它，以便在正确的时间设置li类电流，DIV在正确的时间显示A0、A1、A2和A3

和

和

2 个解决方案

#1

The issue here is that ng-repeat creates its own scope, so when you do selected=$index it creates a new a selected property in that scope rather than altering the existing one. To fix this you have two options:

这里的问题是，ng-repeat创建自己的范围，所以当您执行selected=$index时，它会在该范围内创建一个新的选定的属性，而不是修改现有的属性。要解决这个问题，你有两个选择:

Change the selected property to a non-primitive (ie object or array, which makes javascript look up the prototype chain) then set a value on that:

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

$scope.selected = {value: 0};

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

See plunker

看到一美元

or

或

Use the $parent variable to access the correct property. Though less recommended as it increases coupling between scopes

使用$parent变量访问正确的属性。虽然不太推荐，因为它增加了作用域之间的耦合

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

See plunker

看到一美元

#2

As johnnyynnoj mentioned ng-repeat creates a new scope. I would in fact use a function to set the value. See plunker

正如johnnyynnoj提到的，ng-repeat创造了一个新的范围。我实际上会用一个函数来设置值。看到一美元

JS:

JS:

$scope.setSelected = function(selected) {
  $scope.selected = selected;
}

HTML:

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>