SORU
29 Temmuz 2013, PAZARTESİ


Nasıl dizin içindeki $ng-tekrar bir sınıf yaratmak için kullanabilir miyim ve bir DİV göstermek?

<li> öğeleri kümesi 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ı adresi bir zaman sonra yukarıdaki öğeleri tıkladığında, seçilen ve <DIV> unsurlardan biri aşağıdaki Haritayı değerini ayarlayın:

<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 durum için çalışır.

  • Kullanıcı ABC sonra ilk tıklattığında <DIV> 100 gösterir ve kırmızı renk değiştirir.
  • DEF bastıktan sonra kırmızı 101 gösterileri ve DEF değiştirir.

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

  • Ne zaman bir kullanıcı tıklama A0, A1, A2 veya A3 o zaman doğru göstermez, seçilen değeri ayarlı değil ve renk TÜM ng-repeat A0,A1,A2 ve A3 dönüş kırmızı.

Bu en iyisi bu Plunker bakarsanız gösterilir:

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

Üstündeki üstünde bir hata ayıklama yardımcı olarak {{ selected }} ekledim unutmayın. x in [4,5,6,7] sadece gerektiği zamanda bir döngü taklit. Gerçek hayatta ng-repeat="answer in modal.data.answers" olarak bunlar var.

Nasıl yapacağımı bilen birileri olabilir bu kadar li sınıfı geçerli ayarlanır doğru zamanda ve DIV gösterir doğru zamanda için A0, A1, A2 ve A3 <li> <DIV>

CEVAP
29 Temmuz 2013, PAZARTESİ


Burada sorun ng-repeat kendi kapsamı oluşturur, selected=$index yaptığınızda varolan değiştirmekten ziyade, bu kapsamda selected yeni bir özellik oluşturur. İki seçeneğiniz var bunu düzeltmek için:

Olmayan ilkel (javascript prototip zincirinde Yukarı Bak yapar yani nesne ya da dizi) bir sonra ki: değeri ayarlamak için seçili özelliğini değiştirin

$scope.selected = {value: 0};

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

See plunker

ya

$parent değişken doğru özelliğe erişmek için kullanın. Gerçi az kapsamları arasındaki bağlantı arttıkça önerilir

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

See plunker

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • BachelorsPadTv

    BachelorsPad

    17 Ocak 2012
  • Max Lee

    Max Lee

    18 AĞUSTOS 2006
  • MugenPowerBatteries

    MugenPowerBa

    8 EKİM 2010