ng-classDiretiva 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-classdiretiva vincula dinamicamente uma ou mais classes CSS a um elemento HTML.

O valor da ng-classdiretiva 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.