Instrução ng-class do AngularJS

Definição e uso

ng-class A instrução é usada para dinamicamente ligar uma ou mais classes CSS a elementos HTML.

ng-class O valor da instrução pode ser uma string, um objeto ou um array.

Se for uma string, ela deve conter um ou mais nomes de classes separados por espaço.

Como um objeto, ele deve conter pares de chave-valor, onde a chave é o nome da classe que você deseja adicionar e o valor é um valor booleano. A classe será adicionada apenas quando o valor estiver configurado como true.

Como array, pode ser a combinação dos dois. Cada elemento do array pode ser uma string ou um objeto descrito acima.

Exemplo

Mudar a classe do elemento <div>:

<select ng-model="home">
    <option value="sky">Céu</option>
    <option value="tomato">Tomate</option>
</select>
<div ng-class="home">
    <h1>Bem-vindo à Casa!</h1>
    <p>Eu gosto disso!</p>
</div>

Experimente você mesmo

Sintaxe

<elemento ng-class="expressão</elemento>

Todos os elementos HTML suportam.

Parâmetros