web-dev-qa-db-fra.com

Classe dynamique dans Angular.js

Je veux ajouter dynamiquement une classe CSS à un <li> élément sur lequel je boucle. La boucle est comme ça:

<li ng-repeat="todo in todos" ng-class="{{todo.priority}}">
  <a href="#/todos/{{todo.id}}">{{todo.title}}</a>
  <p>{{todo.description}}</p>
</li>

Dans mon modèle, j'ai la priorité de propriété qui peut être "urgent", "pas si important" ou "normal" et je veux juste assigner la classe à chaque élément.

Je sais que je peux le faire pour un booléen avec quelque chose comme ng-class="{'urgent': todo.urgent}" Mais ma variable n'est pas un booléen, mais a trois valeurs. Comment je ferais ça? Notez aussi que je ne veux pas utiliser ng-style="..." puisque ma classe modifiera plusieurs choses visuelles.

classdynamicangularjs
49
mpaepper

Vous pouvez simplement assigner une fonction en tant qu'expression et retourner la classe appropriée à partir de là. Edit: il existe également une meilleure solution pour les classes dynamiques. Veuillez consulter la note ci-dessous.

Extrait de la vue:

<div ng-class="appliedClass(myObj)">...</div>

et dans le contrôleur:

$scope.appliedClass = function(myObj) {
    if (myObj.someValue === "highPriority") {
        return "special-css-class";
    } else {
        return "default-class"; // Or even "", which won't add any additional classes to the element
    }
}

Meilleure façon de faire ça

J'ai récemment appris une autre approche. Vous transmettez un objet dont les propriétés correspondent aux classes sur lesquelles vous opérez et les valeurs sont des expressions ou des variables booléennes. Un exemple simple:

ng-class="{ active: user.id == activeId }"

Dans ce cas, la classe active sera ajoutée à l'élément tant que user.id correspond à activeId du $scope objet!

86
ŁukaszBachman

Si vous souhaitez simplement ajouter une classe, utilisez l'attribut class avec interpolation:

class="priority-is-{{todo.priority}}"
44
Gilbert

Vous l'avez presque eu :)
Il devrait être sans marquage d'interpolation ({{ et }}):

<li ng-repeat="todo in todos" ng-class="todo.priority">
...
9
vucalur