Bir sınıfı etkinleştirmek ve bir DIV göstermek için $ indeksini ng tekrarında nasıl kullanabilirim?

Bir dizi <li>elementim 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>

Bir kullanıcı yukarıdaki adres öğelerinden birini tıkladığında, seçili değeri ayarlamalı ve <DIV>aşağıdaki öğelerden birini göstermelidir :

<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 vaka için geçerlidir.

• Kullanıcı ABC'yi tıklattığında, ilkinde <DIV>100 gösterilir ve renk kırmızıya döner.
• DEF tıklandığında 101 gösterilir ve DEF kırmızıya döner.

Ancak A0, A1, A2 ve A3 için hiç çalışmıyor

• Bir kullanıcı A0, A1, A2 veya A3'ü tıkladığında doğru görünmez, seçilen değer ayarlanmaz ve TÜM ng-tekrar A0, A1, A2 ve A3'ün rengi kırmızıya döner.

Bu en iyi, bu Plunker'a bakarsanız gösterilir:

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

En üstte {{ selected }}hata ayıklama yardımı olarak eklediğimi unutmayın . Ayrıca x in [4,5,6,7]sadece bir döngüyü simüle etmek içindir. Gerçek hayatta bunu var ng-repeat="answer in modal.data.answers".

Herkes biliyorum ben o kadar kurabilirsiniz mu nasıl lisınıf akımı doğru zamanda ayarlanır ve DIVA0, A1, A2 ve A3 için doğru zamanda gösterir <li>ve<DIV>

Buradaki sorun ng-repeat, kendi kapsamını oluşturmasıdır, bu nedenle bunu yaptığınızda mevcut kapsamı değiştirmek yerine selected=$indexyeni bir selectedözellik oluşturur . Bunu düzeltmek için iki seçeneğiniz vardır:

Seçili özelliği ilkel olmayan bir şekilde değiştirin (yani, javascript'in prototip zincirini aramasını sağlayan nesne veya dizi) ve ardından bunun için bir değer ayarlayın:

$scope.selected = {value: 0};

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

Pistonu görün

veya

$parentDoğru özelliğe erişmek için değişkeni kullanın . Kapsamlar arasındaki bağlantıyı arttırdığı için daha az tavsiye edilmesine rağmen

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

Pistonu görün

Johnnyynnoj belirtildiği gibi ng-tekrar yeni bir kapsam oluşturur. Aslında değeri ayarlamak için bir işlev kullanırdım. Pistonu görün

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>