4.10 ng-class

La directiva ng-class permite de una forma sencilla añadir y quitar clases CSS a un tag.

La forma de hacerlo es mediante un objeto JavaScript que esté en el $scope. En dicho objeto , el nombre de cada propiedad será el nombre de una clase CSS. Si el valor de dicha propiedad es true se añadirá la clase CSS al tag y si está a false se quitará su clase CSS del tag.

Veamos un ejemplo:

Los estilos css serán los siguientes:

    .rojo {
      color:red;
    }
    .subrayado {
      text-decoration: line-through;
    }
    .negrita {
      font-weight: bold;
    }

var app = angular.module("app", []);
   
app.controller("PruebaController", function($scope) {
  $scope.clasesCss={
    rojo:true,
    subrayado:true,
    negrita:false
  }
});

Línea 4: Se declara la propiedad “clasesCss” que contiene 3 propiedades, una por cada uno de las 3 clases CSS. Sólo están a true las propiedades rojo y subrayado por lo que sólo se aplicarán estas 2 clases CSS al elemento.

<div ng-class="clasesCss">Este es un texto con clases dinámicas</div>

Ahora al aplicar la directiva ng-class al tag <div> se aplicarán las clases CSS “rojo” y “subrayado”.

Pero ahora todo ésto tiene una ventaja. Al ser valores del $scope los podemos modificar desde AngularJS y automáticamente se modificarán las clases CSS.

Ahora podemos añadir los siguientes tags <input> para modificar desde la propia página las clases CSS que se aplican:

  <input ng-model="clasesCss.rojo" type="checkbox">Aplicar estilo Rojo
  <br>
  <input ng-model="clasesCss.subrayado"  type="checkbox">Aplicar estilo Subrayado
  <br>
  <input ng-model="clasesCss.negrita"  type="checkbox">Aplicar estilo Negrita  
  <br>

Gracias a estos “checkbox” podemos fácilmente modificar qué estilos se aplican a un tag HTML.

AngularJS soporta también que en vez de ser la propiedad del $scope un objeto con las clases sea también un array con el nombre de las clases CSS o un único String con los nombres de las clases separadas por espacios.

Sin embargo, estas 2 formas las veo menos útiles que la que he explicado, pero por supuesto pueden ser mas cómodas de usar según la ocasión.

Ejemplo

El código completo del ejemplo es:

.rojo {
  color: red;
}
.subrayado {
  text-decoration: line-through;
}
.negrita {
  font-weight: bold;
}

<!DOCTYPE html>
<html ng-app="app">
<head>
  <link rel="stylesheet" href="style.css">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
  <script src="script.js"></script>
</head>
<body ng-controller="PruebaController">

  <input ng-model="clasesCss.rojo" type="checkbox">Aplicar estilo Rojo
  <br>
  <input ng-model="clasesCss.subrayado"  type="checkbox">Aplicar estilo Subrayado
  <br>
  <input ng-model="clasesCss.negrita"  type="checkbox">Aplicar estilo Negrita  
  <br>
  <br>
  <div ng-class="clasesCss">Este es un texto con clases dinámicas</div>

</body>
</html>

Linea 17: Con la directiva ng-class se indica el nombre de la propiedad que contiene las clases a mostrar.

var app = angular.module("app", []);
   
app.controller("PruebaController", function($scope) {
  $scope.clasesCss={
    rojo:true,
    subrayado:true,
    negrita:false
  }
});

Linea 4: El objeto con las clases que pueden o no añadirse al tag HTML

Referencias

ng-class