ng-sınıfının durumu değişiyor ama dersleri güncellemiyor

Question

Çok garip bir sorunum var. $scope.selectedCat == cat.id uygun <li> bir active sınıfı ayarlamak zorunda. Liste ng-repeat ile üretilir. SelectedCat false ise, 'Tüm Kategorileri Tara' liste öğesi (ng-repeat dışında) aktif olarak ayarlanır. (FireBug gelen anlık)

<div id="cat-list" ng-controller="CatController"> 
    <li ng-class="{'active': {{selectedCat == false}}}"> 
     <a> 
      <div class="name" ng-click="setCat(false)" >Browse All Categories</div> 
     </a> 
    </li> 
    <li class="has-subcat" ng-repeat="cat in cats | filter:catsearch" ng-class="{'active': {{selectedCat == cat.id}}}"> 
     <a> 
      <div cat class="name" ng-click="setCat({{cat.id}})" ng-bind-html="cat.name | highlight:catsearch"></div> 
     </a> 
    </li> 
</div> 

sayfa yüklendiğinde, her şey gayet iyi çalışıyor: setCat()$scope.selectedCat değişkenin değerini ayarlar bir cat.id değere $ scope.selectedClass set Ancak

<li ng-class="{'active': true}" class="ng-scope active"> 
<!-- ngRepeat: cat in cats | filter:catsearch --> 
<li class="has-subcat ng-isolate-scope" ng-repeat="cat in cats | filter:catsearch" ng-class="{'active': false}"> 

, ng sınıf içinde durum doğru değerlendirilir alır, ancak ng sınıfı buna göre sınıflar güncelleme olmaz:

<li ng-class="{'active': false}" class="ng-scope active"> <!--Right here!--> 
<!-- ngRepeat: cat in cats | filter:catsearch --> 
<li class="has-subcat ng-isolate-scope" ng-repeat="cat in cats | filter:catsearch" ng-class="{'active': true}"> 

t unutmayın ilk satırdaki şapka aktif sınıf sette kalırken, ng-class false olarak değerlendirilir. Son satırda aktif değil, ng-sınıfı doğru olarak değerlendirilir.

Neden çalışmadığı konusunda herhangi bir fikrin var mı? Bunu yapmanın doğru Açısal yolu nedir?

Answer 1

değiştirin:

ng-class="{'active': {{selectedCat == cat.id}}}" 

olarak:

ng-class="{'active': selectedCat == cat.id}" 

Sen Açısal maddeden oluşan bu küme parantezleri böyle yuva gerek kalmayacak.

Daha fazla örnek için ng-class documentation'a bakın. Bunun yerine

ng-class="{'active': {{selectedCat == cat.id}}}" 

kullanımı ben de aynı sorunla karşı karşıya ediyorum Merhaba

ng-class="{active: selectedCat == cat.id}" 

Answer 2

. Sorunu, doğrudan ng-sınıfına atamak yerine, ayrı yöntemi çağırıp değeri döndürmek yerine çözdüm.

örn:

ng-class="getStyleClass(cat)" 

$scope.getStyleClass = function(cat) { 
     return "active: selectedCat == cat.id"; 
} 

kabaca i kodlu. Lütfen ihtiyacınıza göre yöntemi değiştirin. @Cerbrus verdi yanıta Genişleyen

Answer 3

ait

Answer 4

:

değiştirin:

ng-class="{'active': {{selectedCat == cat.id}}}"

olarak:

ng-class="{'active': selectedCat == cat.id}"

kullanıyorum ifadesi ile bir sorunu vardı af ilter, bu çift kıvırcık parantez {{ }} olmadan düzgün değerlendirmek olmaz.

Örnek: ng-class="{'active': {{ selectedCat | filter:catType }} == cat.id}"

Ben küme parantezleri yerine parantez koyarak çözdü.

Çözüm: Sadece concat, aktif-1 (ve -1 başka bir şeye bağlıdır): ng-class="{'active': (selectedCat | filter:catType) == cat.id}"