ng-class
Diretiva AngularJS
Exemplo
Altere a classe de um 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>
Definição e uso
A ng-class
diretiva vincula dinamicamente uma ou mais classes CSS a um elemento HTML.
O valor da ng-class
diretiva pode ser uma string, um objeto ou um array.
Se for uma string, deve conter um ou mais nomes de classe separados por espaço.
Como um objeto, ele deve conter pares chave-valor, onde a chave é o nome da classe que você deseja adicionar e o valor é um valor booleano. A classe só será adicionada se o valor for definido como true.
Como uma matriz, pode ser uma combinação de ambos. Cada elemento da matriz pode ser uma string ou um objeto, descrito acima.
Sintaxe
<element ng-class="expression"></element>
Suportado por todos os elementos HTML.
Valores de parâmetro
Value | Description |
---|---|
expression | An expression that returns one or more class names. |