如何使用ng-repeat中的$ index啓用類並顯示DIV？

Question

我有一組<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> 

當用戶點擊上述然後那麼它應該地址元件中的一個，設定所選擇的值，並顯示在下面的<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>

Answer 1

的我如何設置此問題在於ng-repeat創建了自己的範圍，因此當您執行selected=$index時，它會在該範圍內創建一個新的selected屬性，而不是修改現有屬性。爲了解決這個問題有兩種選擇：

改變所選擇的屬性，以非原語（即，對象或數組，這使得JavaScript的查找原型鏈）然後設置一個值：

$scope.selected = {value: 0}; 

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

See plunker

或

使用$parent變量來訪問正確的屬性。雖然不太推薦，因爲它增加了示波器

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

See plunker

Answer 2

之間的耦合如johnnyynnoj提到NG-重複創建一個新的範圍。我實際上會使用一個函數來設置值。見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>