web-dev-qa-db-fra.com

La condition de classe ng change, mais pas la mise à jour des classes

J'ai un problème très étrange. Je dois définir une classe active sur le <li> Approprié lorsque le $scope.selectedCat == cat.id. La liste est générée avec ng-repeat. Si selectedCat est faux, l'élément de liste "Parcourir toutes les catégories" (en dehors de ng-repeat) est défini sur actif. setCat() définit la valeur de la variable $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>

Lorsque la page se charge, tout fonctionne bien (instantané de 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}">

Cependant, lorsque j'ai défini $ scope.selectedClass sur une valeur cat.id, La condition dans ng-class est évaluée correctement, mais ng-class ne mettra pas à jour les classes en conséquence:

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

Veuillez noter que dans la première ligne, la classe active reste définie, tandis que la classe ng est évaluée à false. Dans la dernière ligne, active n'est pas définie, tandis que ng-class prend la valeur true.

Des idées pourquoi cela ne fonctionne pas? Quelle est la bonne façon de faire Angular?

javascriptangularjsng-class
27
orszaczky

Remplacer:

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

Avec:

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

Vous n'avez jamais besoin d'imbriquer ces accolades comme ça, dans Angular.

Jetez un oeil à la ng-class documentation pour d'autres exemples.

35
Cerbrus

Au lieu de

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

utilisation

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

Salut, je suis également confronté au même problème. j'ai résolu le problème au fait au lieu d'attribuer la valeur directement à ng-class, appelez la méthode séparée et retournez la valeur.

ex:

ng-class="getStyleClass(cat)"

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

à peu près j'ai codé. veuillez modifier la méthode selon vos besoins.

5
Bharath Pazhani

En développant la réponse @Cerbrus a donné:

Remplacer:

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

Avec:

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

J'ai eu un problème avec une expression utilisant un filtre, qui ne serait pas évaluée correctement sans accolades doubles {{ }}.

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

Je l'ai résolu en mettant des parenthèses à la place des accolades.

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

1
Tom

L'avez-vous résolu?

À mon avis, vous devriez utiliser

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

Avec:

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

cela vous aidera.

0
angularjs