Instrucción ng-class de AngularJS

Definición y uso

ng-class La instrucción se utiliza para vincular dinámicamente una o más clases CSS a un elemento HTML.

ng-class El valor de la instrucción puede ser una cadena, un objeto o un array.

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

Como objeto, debe contener pares de clave-valor, donde la clave es el nombre de la clase que desea agregar y el valor es un valor booleano. Solo se agregará la clase cuando el valor esté configurado en true.

Como array, puede ser la combinación de ambos. Cada elemento del array puede ser una cadena o un objeto descrito anteriormente.

Ejemplo

Cambiar la clase del elemento <div>:

<select ng-model="home">
    <option value="sky">Cielo</option>
    <option value="tomato">Tomate</option>
</select>
<div ng-class="home">
    <h1>Bienvenido a casa!</h1>
    <p(Me gusta!)</p>
</div>

Prueba por ti mismo

Sintaxis

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

Todos los elementos HTML admiten.

Parámetros

Parámetros Descripción
expression Expresión que devuelve una o más clases.