Sınıfı etkinleştirmek ve DIV göstermek için $ index'i ng-repeat içinde nasıl kullanabilirim?

Question

<li> öğeleri kümem var.

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

kullanıcı olması gerektiği daha sonra yukarıdaki adres elemanlarının birini tıkladığında

, seçilen değerini ayarlamak ve aşağıdaki <DIV> öğelerden birini gösterir:

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

Bu ilk iki için çalışır vakalar.

• Kullanıcı, ABC'yi tıklattığında, ilk <DIV>, 100'ü gösterir ve rengi kırmızıya dönüştürür.
• DEF tıklandığında 101 gösterilir ve DEF kırmızıya dönüşür.

bir kullanıcının tıkladığında A0, A1, A2 veya A3 sonra göstermez doğru, seçilen değer değildir A0, A1, A2 ve A3

• için hiç çalışmaz Ancak set ve TÜM ng tekrarı A0, A1, A2 ve A3 rengi kırmızıya döner.

bu Plunker bakmak, bu en iyi gösterilmiştir: üstündeki ben üst kısmında bir hata ayıklama yardımcı olarak {{ selected }} eklediğinizi

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

Not. Ayrıca x in [4,5,6,7] sadece bir döngüyü simüle etmek içindir. Gerçek hayatta bunu ng-repeat="answer in modal.data.answers" olarak aldım.

kimse li sınıf akımı doğru zamanda kurmak ve DIV A0, A1, A2 ve A3 <li> ve <DIV>

Answer 1

The için doğru zamanda gösterir ki bu yüzden bu kurabilirsiniz biliyor mu Buradaki sorun, ng-repeat'un kendi kapsamını oluşturmasıdır, bu nedenle, selected=$index yaptığınızda, varolan olanı değiştirmek yerine bu kapsamda yeni bir selected özelliği oluşturur.

$scope.selected = {value: 0}; 

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

: o zaman bizim bir değer ayarlamak

Değiştir primitif olmayan (javascript prototip zincirinde görünmesini sağlar, yani nesneye veya dizi) için seçilen özelliği: iki seçeneğiniz vardır Bunu düzeltmek için See plunker

veya

doğru özelliğine erişmek için $parent değişkeni kullanın. Olsa az johnnyynnoj yeni kapsamı oluşturur ng tekrar belirtildiği gibi bu kapsam

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

See plunker

Answer 2

arasında bağlantıyı arttıran olarak tavsiye edilir. Aslında değeri ayarlamak için bir işlev kullanırdım.

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