ng-classé uma diretiva dos AngularJs principais. No qual você pode usar "Sintaxe de seqüência de caracteres", "Sintaxe de matriz", "Expressão avaliada", "Operador ternário" e muitas outras opções descritas abaixo:
ngClass usando sintaxe de string
Esta é a maneira mais simples de usar o ngClass. Você pode apenas adicionar uma variável Angular à ng-class e essa é a classe que será usada para esse 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!
Exemplo de demonstração de ngClass usando sintaxe de string
ngClass usando sintaxe de matriz
Isso é semelhante ao método de sintaxe de cadeia, exceto que você pode aplicar várias classes.
<!-- 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 usando expressão avaliada
Um método mais avançado de usar o ngClass (e o que você provavelmente mais usará) é avaliar uma expressão. A maneira como isso funciona é que, se uma variável ou expressão for avaliada true, você poderá aplicar uma determinada classe. Caso contrário, a classe não será aplicada.
<!-- 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 }">
Exemplo de ngClass usando expressão avaliada
ngClass usando valor
Isso é semelhante ao método de expressão avaliado, exceto que você apenas pode comparar vários valores com a única variável.
<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>
ngClass usando o operador ternário
O operador ternário nos permite usar taquigrafia para especificar duas classes diferentes, uma se uma expressão for verdadeira e outra para falsa. Aqui está a sintaxe básica para o operador ternário:
ng-class="$variableToEvaluate ? 'class-if-true' : 'class-if-false'">
Avaliando primeiro, último ou número específico
Se você estiver usando a ngRepeatdiretiva e você deseja aplicar classes para o first, lastou um número específico na lista, você pode usar propriedades especiais ngRepeat. Estes incluem $first, $last, $even, $odd, e alguns outros. Aqui está um exemplo de como usá-los.
<!-- 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>