Zmiany stanu klasy ng, ale nie aktualizacji klas

Question

Mam bardzo dziwny problem. Muszę ustawić klasę active na odpowiednim <li>, gdy $scope.selectedCat == cat.id. Lista jest generowana z ng-repeat. Jeśli selectedCat ma wartość false, pozycja listy "Przeglądaj wszystkie kategorie" (poza ng-repeat) jest ustawiona jako aktywna. setCat() ustawia wartość zmiennej $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> 

Po załadowaniu strony, wszystko działa w porządku (snapshot z 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}"> 

Jednakże kiedy ustawić $ scope.selectedClass do wartości cat.id, warunek w klasie ng zostanie poprawnie oceniony, ale klasa ng nie zaktualizuje odpowiednio klas:

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

Uwaga t kapelusz w pierwszym wierszu aktywnej klasy pozostaje ustawiony, podczas gdy klasa n to wynik fałszywy. W ostatnim wierszu aktywny nie jest ustawiony, podczas gdy klasa n ma wartość true.

Jakieś pomysły, dlaczego to nie działa? Jaki jest właściwy kątowy sposób robienia tego?

Answer 1

Wymienić:

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

Z:

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

nigdy Trzeba gnieździe te nawiasy klamrowe takiego, w kątowe.

Zajrzyj do ng-class documentation po więcej przykładów.

Answer 2

Zamiast

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

użytku

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

Answer 3

Cześć Jestem również stoi ten sam problem. Rozwiązałem problem, zamiast przydzielać wartość bezpośrednio do klasy ng, wywołać osobną metodę i zwrócić wartość.

ex:

ng-class="getStyleClass(cat)" 

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

grubsza i kodowane. zmień metodę zgodnie z wymaganiami.

Answer 4

Rozwijając na odpowiedź @Cerbrus dał:

Wymienić:

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

Z:

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

miałem problem z wyrazem korzystania af ilter, który nie byłby właściwie oceniany bez podwójnych nawiasów klamrowych {{ }}.

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

że rozwiązany przez umieszczenie zamiast nawiasów klamrowych.

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