ng-classDirectiva AngularJS


Ejemplo

Cambiar la clase de un 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>

Definición y uso

La ng-classdirectiva vincula dinámicamente una o más clases CSS a un elemento HTML.

El valor de la ng-classdirectiva puede ser una cadena, un objeto o una matriz.

Si es una cadena, debe contener uno o más nombres de clase separados por espacios.

Como objeto, debe contener pares clave-valor, donde la clave es el nombre de clase de la clase que desea agregar y el valor es un valor booleano. La clase solo se agregará si el valor se establece en verdadero.

Como matriz, puede ser una combinación de ambos. Cada elemento de la matriz puede ser una cadena o un objeto, como se describe anteriormente.


Sintaxis

<element ng-class="expression"></element>

Compatible con todos los elementos HTML.


Valores paramétricos

Value Description
expression An expression that returns one or more class names.