====== 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.
Este es un texto con clases dinámicas
Ahora al aplicar la directiva ''ng-class'' al tag ''
'' 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 para modificar desde la propia página las clases CSS que se aplican:
Aplicar estilo Rojo
Aplicar estilo Subrayado
Aplicar estilo Negrita
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;
}
Aplicar estilo Rojo
Aplicar estilo Subrayado
Aplicar estilo Negrita
Este es un texto con clases dinámicas
* 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
{{url>http://embed.plnkr.co/pe2RVo}}
===== Referencias =====
* [[https://docs.angularjs.org/api/ng/directive/ngClass|ng-class]]