Directive ng-class d'AngularJS

Définition et utilisation

ng-class Cette instruction est utilisée pour lier dynamiquement une ou plusieurs classes CSS à un élément HTML.

ng-class La valeur de l'instruction peut être une chaîne de caractères, un objet ou un tableau.

Si c'est une chaîne de caractères, elle doit contenir un ou plusieurs noms de classes séparés par des espaces.

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

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

Instance

Changer la classe du <div> :

<select ng-model="home">
    <option value="sky">Ciel</option>
    <option value="tomato">Tomate</option>
</select>
<div ng-class="home">
    <h1>Bienvenue à la maison !</h1>
    <p>J'aime ça !</p>
</div>

Essayer personnellement

Syntaxe

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

Tous les éléments HTML prennent en charge.

Paramètres