La direttiva ng-class permette di impostare dinamicamente classi CSS ad un elemento HTML. L'assegnamento di una o più classi può essere fatto in diversi modi. L'approccio più semplice consiste nell'assegnare alla direttiva un'espressione che rappresenti una classe CSS, come nel seguente esempio:
<style type="text/css">
.rosso {color: red}
.verde {color: green}
.blu {color: blue}
</style>
<p>Colore: <input type="text" ng-model="colore"></p>
<p ng-class="colore">È stato scelto il colore {{colore}}</p>In questo caso, il nome della classe CSS inserita dall'utente nella casella di testo causerà la sua applicazione sul paragrafo governato da ng-class.
ng-class non è l'attributo 'class' HTML
Attenzione a non confondere ng-class con l'attributo HTML standard class: mentre l'attributo class vuole direttamente il nome della classe, la direttiva ng-class prevede un'espressione la cui valutazione restituisca il nome di una classe CSS.
Nel nostro esempio l'espressione è rappresentata dalla variabile colore, ma possiamo assegnare una qualsiasi espressione JavaScript che permetta di individuare il nome di una classe CSS. Nel seguente esempio, solo se l'utente inserisce la stringa rosso sarà applicata la classe omonima; in tutti gli altri casi sarà applicata la classe nero:
<style type="text/css">
.rosso {color: red}
.nero {color: black}
</style>
<p>Colore: <input type="text" ng-model="colore"></p>
<p ng-class="colore == 'rosso'? 'rosso' : 'nero'">È stato scelto il colore {{colore}}</p>Applicare più classi e definire classi in modo dinamico
Possiamo specificare l'applicazione di più classi associando alla direttiva ng-class un array di espressioni:
<style type="text/css">
.rosso {color: red}
.verde {color: green}
.blu {color: blue}
.normale {font-style: normal}
.grassetto {font-weight: bold}
.corsivo {font-style: italic}
</style>
<p>Colore: <input type="text" ng-model="colore"></p>
<p>Stile: <input type="text" ng-model="stile"></p>
<p ng-class="[colore, stile]">
È stato scelto il colore {{colore}} e lo stile {{stile}}
</p>In questo caso sarà applicata la combinazione di classi individuata dalle espressioni contenute nell'array. Nel l'esempio specifico, sarà applicata la combinazione di colore e stile di carattere indicata dall'utente tramite le rispettive caselle di testo.
Un'interessante modalità per specificare dinamicamente la classe o la combinazione di classi da applicare ad un elemento HTML è quella basata sulle proprietà di un oggetto. Il seguente è un esempio di utilizzo di questa modalità:
<p>Crea la tua password: <input type="password" ng-model="password"></p>
<p ng-class="{'rosso': password.length < 4, 'giallo': password.length >= 4 && password.length < 8, 'verde': password.length >= 8}">
Robustezza della password
</p>Alla direttiva ng-class è stato assegnato un oggetto in formato JSON le cui proprietà rappresentano le classi e i valori associati sono costituiti da espressioni booleane. Le classi applicate saranno quelle corrispondenti ad espressioni booleane vere.
Nel caso specifico, se il numero di caratteri della password inserita è inferiore a 4 viene applicata la classe rosso, se è uguale o superiore a 8 viene applicata la classe verde, in tutti gli altri casi viene applicata la classe giallo.