ng-Klasse Zustand ändert, aber nicht aktualisiert Klassen

Question

Ich habe ein sehr seltsames Problem. Ich muss eine active Klasse auf die entsprechende <li> wenn die $scope.selectedCat == cat.id. Die Liste wird mit ng-repeat generiert. Wenn selectedCat den Wert false hat, wird der Listeneintrag 'Alle Kategorien durchsuchen' (außerhalb von ng-repeat) auf aktiv gesetzt. setCat() setzt den Wert des $scope.selectedCat Variable:

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

Wenn die Seite geladen wird, funktioniert alles einwandfrei (Snapshot von FireBug):

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

Allerdings, wenn ich $ scope.selectedClass auf einen cat.id Wert gesetzt, Die Bedingung in ng-class wird korrekt ausgewertet, aber ng-class aktualisiert die Klassen nicht entsprechend:

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

Bitte beachten Sie t Hat in der ersten Zeile aktive Klasse bleibt festgelegt, während ng-Klasse zu false ausgewertet wird. In der letzten Zeile ist active nicht gesetzt, während ng-class als true ausgewertet wird.

Irgendwelche Ideen, warum es nicht funktioniert? Was ist die richtige Winkelform, dies zu tun?

Answer 1

ersetzen:

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

mit:

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

Sie müssen nie diese geschweiften Klammern wie das zu nisten, in Angular.

Werfen Sie einen Blick auf die ng-class documentation für einige weitere Beispiele.

Answer 2

Statt

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

Verwendung

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

Answer 3

Hallo, ich bin auch vor dem gleichen Problem. Ich habe das Problem übrigens gelöst, anstatt den Wert direkt der ng-Klasse zuzuweisen, die separate Methode aufzurufen und den Wert zurückzugeben.

ex:

ng-class="getStyleClass(cat)" 

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

grob codiert i. Bitte ändern Sie die Methode gemäß Ihrer Anforderung.

Answer 4

Aufbauend auf der Antwort @Cerbrus gab:

ersetzen:

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

mit:

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

Ich hatte ein Problem mit einem Ausdruck mit af ilter, das würde ohne geschweifte Klammern {{ }} nicht richtig bewerten.

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

Ich löste es durch Klammern anstelle von geschweiften Klammern setzen.

Lösung: ng-class="{'active': (selectedCat | filter:catType) == cat.id}"