Seguimos aprendiendo aspectos básicos sobre AngularJS y nos vamos a detener en una directiva muy útil que nos ayuda a definir clases CSS (class) que se le deben aplicar a los elementos bajo ciertas circunstancias.

La idea es poder definir el aspecto de nuestra aplicación en base a los datos que tengamos en el modelo, aplicando unas class de CSS u otras dependiendo de valores de propiedades del scope o de expresiones que podamos construir.

Existen tres posibles variantes de tipos que acepta la directiva ngClass y que podemos usar siempre que deseemos.

• Asignarle una propiedad del scope que sea una cadena de texto. En este caso esa cadena se coloca como valor en el atributo class. Si en esa cadena existen varios nombres de clases separados por un espacio en blanco, esas clases se aplicarán en conjunto al elemento.
  
• Asignarle una propiedad del scope que contenga un array de cadenas. En ese caso se asignan como clases todos los nombres que haya en las casillas del array.
  
• Asignarle como valor a ng-class un objeto. En ese caso tendrá pares clave valor para especificar nombres de clases y expresiones que deban cumplirse para que éstas se apliquen. Lo veremos mejor con un ejemplo.

Ahora veremos ejemplos de cada una de las tres posibilidades comentadas.

Ejemplo 1) Asignar una propiedad del scope que contiene una cadena

Es tan sencillo como indicar esa propiedad dentro del atributo ng-class, como se ve a continuación.

<h1 ng-class="vm.tamTitular">Acumulador</h1>
<select ng-model="vm.tamTitular">
    <option value="titularpeq">Peque</option>
    <option value="titulargran">Gran</option>
  </select>

Como puedes ver, tenemos un encabezado H1 con ng-class asignado a vm.tamTitular. Esa propiedad del scope se creó a partir de un campo SELECT que está a continuación. Por tanto, cuando cambie el option seleccionado en el campo, cambiará la class asociada al elemento H1.

Tal como habrás deducido, las dos posibles class que se le van a asignar al encabezado serán los value de los OPTION.

Ejemplo 2) Asignar un array de cadenas

Es tan sencillo como definir un array de alguna manera y luego introducirlo dentro de nuestra directiva. Por facilitar las cosas voy a definir el array de manera literal en el controlador.

vm.clases = ["uno", "dos", "tres"];

Luego podremos asociar ese array de cadenas, colocando todos los nombres de clases a un elemento de la página con la directiva ngClass.

<h2 ng-class="vm.clases">Control de operación:</h2>

Como resultado de esa directiva a nuestro encabezado H2 se le van a aplicar las tres clases "uno", "dos" y "tres".

Ejemplo 3) Asignar un objeto con uno o varios pares clave, valor

Este es el uso más complejo de ngClass, pero también el más potente. Nos permite definir expresiones y gracias a ellas Angular sabrá si debe colocar o no una clase CSS en concreto. Se ve bien con un ejemplo delante.

<p ng-class="{positivo: vm.total>=0, negativo: vm.total<0}">
    En el acumulador llevamos <span>{{vm.total}}</span>
  </p>

Este párrafo nos muestra un valor total de una cuenta. Ese valor lo sacamos de la propiedad vm.total y esa misma propiedad es la que usamos para definir la clase de CSS que vamos a asociar como estilo al párrafo.

Ahora echa un vistazo al atributo ng-class y verás que lo que le indicamos es un objeto, pues está entre llaves. Ese objeto tiene un número de pares clave/valor indeterminado, puede ser uno o varios. Cada uno de esos pares clave/valor nos sirven para definir si debe o no aplicarse una clase en concreto.

En la clave colocas el nombre de la clase, class de tu CSS, que Angular puede colocar si se cumple una expresión boleana. Como valor colocamos la expresión boleana a evaluar por AngularJS para que el sistema deduzca si se debe aplicar esa clase o no.

En nuestro ejemplo se aplicará la clase "positivo" en caso que la propiedad vm.total sea mayor o igual que cero. Se aplicará la clase "negativo" en caso que la propiedad vm.total tenga un valor menor que cero.

Ejercicio englobando estos tres usos de ngClass

Bien, con esto ya sabes todo lo que necesitas para poder trabajar con tus ngClass. A continuación encuentras un ejercicio en el que simplemente se usan estos mismos ejemplos relatados hasta ahora. Si lo has entendido no tendrás problema alguno al ver el código siguiente.

Lo vemos por partes. Primero el código HTML:

<div ng-app="acumuladorApp" ng-controller="acumuladorAppCtrl as vm">
  <h1 ng-class="vm.tamTitular">Acumulador</h1> 
  <select ng-model="vm.tamTitular">
    <option value="titularpeq">Peque</option>
    <option value="titulargran">Gran</option>
  </select>
  <h2 ng-class="vm.clases">Control de operación:</h2>
  ¿Cuánto? <input type="text" ng-model="vm.cuanto" size="4" placeholder="0" />
  <br />
  <input type="button" value="+" ng-click="vm.sumar()"/>
  <input type="button" value="-" ng-click="vm.restar()"/>
  <h2>Totales:</h2>
  <p ng-class="{positivo: vm.total>=0, negativo: vm.total<0}">
    En el acumulador llevamos <span>{{vm.total}}</span>
  </p>  
</div>

Ahora puedes ver el código CSS con la definición de varias clases con las que vamos a jugar.

.negativo {
  color: red;
}
.positivo {
  color: #33f;
}
.titularpeq{
  font-size: 10pt;
}
.titulargran{
  font-size: 18pt;
}
.uno{
  background-color: #666;
}
.dos{
  color: #fff;
}
.tres{
  font-size: 30px;
}

Por último el código Javascript de nuestro controlador. Como decía, encontrarás diversas cosas adicionales a las comentadas en este artículo, pero no te deben extrañar porque fueron explicadas anteriormente en el Manual de AngularJS.

angular
  .module('acumuladorApp', [])
  .controller("acumuladorAppCtrl", controladorPrincipal);

function controladorPrincipal(){
  //esta función es mi controlador
  var vm = this;
  vm.total = 0;
  //scope.cuanto = 0;
  vm.tamTitular = "titularpeq"

  vm.sumar = function(){
    vm.total += parseInt(vm.cuanto);
  }
  vm.restar = function(){
    vm.total -= parseInt(vm.cuanto);
  }
  vm.clases = ["uno", "dos", "tres"];
};

Eso es todo, esperamos que puedas disfrutar de esta útil directiva en tus proyectos. Con un poco de imaginación comprobarás la potencia de ngClass.