ng-classDirettiva AngularJS


Esempio

Cambia classe di un elemento <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>

Definizione e utilizzo

La ng-classdirettiva associa dinamicamente una o più classi CSS a un elemento HTML.

Il valore della ng-classdirettiva può essere una stringa, un oggetto o un array.

Se è una stringa, dovrebbe contenere uno o più nomi di classe separati da spazi.

Come oggetto, dovrebbe contenere coppie chiave-valore, dove la chiave è il nome della classe che si desidera aggiungere e il valore è un valore booleano. La classe verrà aggiunta solo se il valore è impostato su true.

Come array, può essere una combinazione di entrambi. Ogni elemento dell'array può essere una stringa o un oggetto, descritto come sopra.


Sintassi

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

Supportato da tutti gli elementi HTML.


Valori dei parametri

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