ng-classè una direttiva dei principali AngularJs. In cui è possibile utilizzare "Sintassi stringa", "Sintassi array", "Espressione valutata", "Operatore ternario" e molte altre opzioni descritte di seguito:
ngClass usando la sintassi delle stringhe
Questo è il modo più semplice di usare ngClass. Puoi semplicemente aggiungere una variabile angolare a ng-class e questa è la classe che verrà utilizzata per quell'elemento.
<!-- whatever is typed into this input will be used as the class for the div below -->
<input type="text" ng-model="textType">
<!-- the class will be whatever is typed into the input box above -->
<div ng-class="textType">Look! I'm Words!
Demo Esempio di ngClass usando la sintassi delle stringhe
ngClass utilizzando la sintassi dell'array
Questo è simile al metodo di sintassi della stringa, tranne per il fatto che è possibile applicare più classi.
<!-- both input boxes below will be classes for the div -->
<input type="text" ng-model="styleOne">
<input type="text" ng-model="styleTwo">
<!-- this div will take on both classes from above -->
<div ng-class="[styleOne, styleTwo]">Look! I'm Words!
ngClass utilizzando l'espressione valutata
Un metodo più avanzato di utilizzo di ngClass (e quello che probabilmente userete di più) è valutare un'espressione. Il modo in cui funziona è che se una variabile o espressione valuta true, è possibile applicare una determinata classe. In caso contrario, la classe non verrà applicata.
<!-- input box to toggle a variable to true or false -->
<input type="checkbox" ng-model="awesome"> Are You Awesome?
<input type="checkbox" ng-model="giant"> Are You a Giant?
<!-- add the class 'text-success' if the variable 'awesome' is true -->
<div ng-class="{ 'text-success': awesome, 'text-large': giant }">
Esempio di ngClass utilizzando l'espressione valutata
ngClass utilizzando il valore
Questo è simile al metodo dell'espressione valutata, tranne per il fatto che sei in grado di confrontare più valori con l'unica variabile.
<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>
ngClass utilizzando l'operatore ternario
L'operatore ternario ci consente di usare la scorciatoia per specificare due diverse classi, una se un'espressione è vera e una per falso. Ecco la sintassi di base per l'operatore ternario:
ng-class="$variableToEvaluate ? 'class-if-true' : 'class-if-false'">
Valutazione del primo, ultimo o numero specifico
Se si utilizza la ngRepeatdirettiva e si desidera applicare le classi al first, lasto un numero specifico nella lista, è possibile utilizzare le proprietà speciali di ngRepeat. Questi includono $first, $last, $even, $odd, e pochi altri. Ecco un esempio di come usarli.
<!-- add a class to the first item -->
<ul>
<li ng-class="{ 'text-success': $first }" ng-repeat="item in items">{{ item.name }}</li>
</ul>
<!-- add a class to the last item -->
<ul>
<li ng-class="{ 'text-danger': $last }" ng-repeat="item in items">{{ item.name }}</li>
</ul>
<!-- add a class to the even items and a different class to the odd items -->
<ul>
<li ng-class="{ 'text-info': $even, 'text-danger': $odd }" ng-repeat="item in items">{{ item.name }}</li>
</ul>