ng-classDirective AngularJS


Exemple

Changer la classe d'un élément <div> :

<select ng-model="home">
    <option value="sky">Sky</option>
    <option value="tomato">Tomato</option>
</select>

<div ng-class="home">
    <h1>Welcome Home!</h1>
    <p>I like it!</p>
</div>

Définition et utilisation

La ng-classdirective lie dynamiquement une ou plusieurs classes CSS à un élément HTML.

La valeur de la ng-classdirective peut être une chaîne, un objet ou un tableau.

S'il s'agit d'une chaîne, elle doit contenir un ou plusieurs noms de classe séparés par des espaces.

En tant qu'objet, il doit contenir des paires clé-valeur, où la clé est le nom de la classe que vous souhaitez ajouter et la valeur est une valeur booléenne. La classe ne sera ajoutée que si la valeur est définie sur true.

En tant que tableau, il peut s'agir d'une combinaison des deux. Chaque élément du tableau peut être soit une chaîne, soit un objet, décrit comme ci-dessus.


Syntaxe

<element ng-class="expression"></element>

Pris en charge par tous les éléments HTML.


Valeurs des paramètres

Value Description
expression An expression that returns one or more class names.