AngularJS
directiva de clase ng

Tres tipos de expresiones de clase ng

Angular admite tres tipos de expresiones en la directiva ng-class .

1. cuerda

<span ng-class="MyClass">Sample Text</span>

Especificar una expresión que se evalúa como una cadena le dice a Angular que la trate como una variable de $ scope. Angular verificará $ scope y buscará una variable llamada "MyClass". Cualquiera que sea el texto contenido en "MyClass" se convertirá en el nombre real de la clase que se aplica a este <span> . Puede especificar varias clases separando cada clase con un espacio.

En su controlador, puede tener una definición que se parece a esto:

$scope.MyClass = "bold-red deleted error";

Angular evaluará la expresión MyClass y encontrará la definición de $ scope. Aplicará las tres clases "rojo negrita", "borrado" y "error" al elemento <span> .

Especificar clases de esta manera le permite cambiar fácilmente las definiciones de clase en su controlador. Por ejemplo, es posible que deba cambiar la clase según las interacciones de otros usuarios o los nuevos datos que se cargan desde el servidor. Además, si tiene muchas expresiones para evaluar, puede hacerlo en una función que define la lista final de clases en una variable de $scope . Esto puede ser más fácil que intentar incluir muchas evaluaciones en el atributo ng-class en su plantilla HTML.

2. Objeto

Esta es la forma más comúnmente utilizada de definir clases usando ng-class porque le permite especificar evaluaciones que determinan qué clase usar.

Especifique un objeto que contiene pares clave-valor. La clave es el nombre de la clase que se aplicará si el valor (un condicional) se evalúa como verdadero.

<style>
    .red { color: red; font-weight: bold; }
    .blue { color: blue; }
    .green { color: green; }
    .highlighted { background-color: yellow; color: black; }
</style>

<span ng-class="{ red: ShowRed, blue: ShowBlue, green: ShowGreen, highlighted: IsHighlighted }">Sample Text</span>

<div>Red: <input type="checkbox" ng-model="ShowRed"></div>
<div>Green: <input type="checkbox" ng-model="ShowGreen"></div>
<div>Blue: <input type="checkbox" ng-model="ShowBlue"></div>
<div>Highlight: <input type="checkbox" ng-model="IsHighlighted"></div>

3. Array

Una expresión que se evalúa como una matriz le permite usar una combinación de cadenas (vea el número 1 arriba) y los objetos condicionales (número 2 arriba).

<style>
    .bold { font-weight: bold; }
    .strike { text-decoration: line-through; }
    .orange { color: orange; }
</style>

<p ng-class="[ UserStyle, {orange: warning} ]">Array of Both Expression Types</p>
<input ng-model="UserStyle" placeholder="Type 'bold' and/or 'strike'"><br>
<label><input type="checkbox" ng-model="warning"> warning (apply "orange" class)</label>

Esto crea un campo de entrada de texto vinculado a la variable de alcance UserStyle que permite al usuario escribir cualquier nombre de clase. Estos se aplicarán dinámicamente al elemento <p> según los tipos de usuario. Además, el usuario puede hacer clic en la casilla de verificación que está vinculada a la variable de alcance de warning . Esto también se aplicará dinámicamente al elemento <p> .