javascript - example - ng-class conditional

La condición ng-class cambia, pero no actualiza las clases

Question

Tengo un problema muy extraño. Tengo que establecer una clase active en el <li> apropiado cuando el $scope.selectedCat == cat.id La lista se genera con ng-repeat. Si selectedCat es falso, el elemento de la lista ''Examinar todas las categorías'' (fuera de ng-repeat) se establece como activo. setCat() establece el valor 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>

Cuando la página se carga, todo funciona bien (instantánea 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}">

Sin embargo, cuando establezco $ scope.selectedClass en un valor cat.id , la condición dentro de ng-class se evalúa correctamente, pero ng-class no actualizará las clases en consecuencia:

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

Tenga en cuenta que en la primera línea, la clase activa permanece establecida, mientras que ng-class se evalúa como falso. En la última línea activa no se establece, mientras que ng-class se evalúa como verdadero.

¿Alguna idea de por qué no funciona? ¿Cuál es la forma angular correcta de hacer esto?

Answer 1

Ampliando la respuesta que @Cerbrus dio:

Reemplazar:

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

Con:

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

Tuve un problema con una expresión que usa un filtro, que no se evaluaría correctamente sin las llaves dobles {{ }} .

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

Lo resolví poniendo paréntesis en lugar de llaves.

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

Answer 2

En lugar de

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

utilizar

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

Answer 3

Hola, yo también estoy frente al mismo problema. Resolví el problema por cierto, en lugar de asignar el valor directamente a ng-class, llame al método separado y devuelva el valor.

ej:

ng-class="getStyleClass(cat)"

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

Aproximadamente lo codifiqué. por favor, cambie el método según su requisito.

Answer 4

Reemplazar:

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

Con:

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

Nunca necesitas anidar esas llaves como esa, en Angular.

Eche un vistazo a la documentación de la ng-class para ver algunos ejemplos más.