modifiche alla condizione di classe ng, ma non aggiornamento classi

Question

Ho un problema molto strano. Devo impostare una classe active sullo <li> appropriato quando lo $scope.selectedCat == cat.id. L'elenco è generato con ng-repeat. Se selectedCat è false, la voce di elenco "Sfoglia tutte le categorie" (al di fuori di ng-repeat) è impostata su attiva. setCat() imposta il valore della variabile $scope.selectedCat:

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

Quando la pagina viene caricata, tutto funziona bene (snapshot da 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}"> 

Tuttavia quando ho impostato $ scope.selectedClass ad un valore cat.id, la condizione all'interno ng classe viene valutata in modo corretto, ma ng classe non aggiornerà le classi di conseguenza:

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

si prega di notare t hat nella prima riga rimane attiva la classe attiva, mentre la classe ng restituisce false. Nell'ultima riga attiva non è impostato, mentre ng-class restituisce true.

Qualche idea sul perché non funziona? Qual è il modo angolare corretto per farlo?

Answer 1

Sostituire:

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

Con:

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

hai mai bisogno di nido quelle parentesi graffe in quel modo, in angolare.

Dai un'occhiata allo ng-class documentation per altri esempi.

Answer 2

Invece di

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

uso

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

Answer 3

Ciao io sono anche di fronte lo stesso problema. ho risolto il problema, invece di assegnare il valore direttamente alla classe ng, chiamare il metodo separato e restituire il valore.

es:

ng-class="getStyleClass(cat)" 

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

grosso modo ho codificato. si prega di cambiare il metodo secondo il vostro requisito.

Answer 4

Ampliando la risposta @Cerbrus dato:

Sostituire:

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

Con:

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

ho avuto un problema con un'espressione utilizzando af ilter, che non sarebbe stato valutato correttamente senza le doppie parentesi graffe {{ }}.

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

ho risolto mettendo parentesi invece di graffe.

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