Istruzione ng-class AngularJS

Definizione e uso

ng-class L'instruzione viene utilizzata per binare dinamicamente una o più classi CSS a un elemento HTML.

ng-class Il valore dell'instruzione 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 viene aggiunta solo quando il valore è impostato su true.

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

Esempio

Modifica la classe dell'elemento <div>:

<select ng-model="home">
    <option value="sky">Sky</option>
    <option value="tomato">Tomato</option>
</select>
<div ng-class="home">
    <h1>Benvenuti a casa!</h1>
    <p>Mi piace!</p>
</div>

Prova tu stesso

Sintassi

<elemento ng-class="espressione</elemento>

Tutti gli elementi HTML supportano.

Parametro

Parametro Descrizione
espressione Restituisce un'espressione che rappresenta una o più classi.