menú
buscar
Diferencias
Muestra las diferencias entre dos versiones de la página.
|
unidades:04_masdirectivas:10_ngclass [2014/07/31 22:39] admin creado |
unidades:04_masdirectivas:10_ngclass [2014/08/30 09:52] (actual) admin |
||
|---|---|---|---|
| Línea 1: | Línea 1: | ||
| ====== 4.10 ng-class ====== | ====== 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: | ||
| + | <sxh css> | ||
| + | .rojo { | ||
| + | color:red; | ||
| + | } | ||
| + | .subrayado { | ||
| + | text-decoration: line-through; | ||
| + | } | ||
| + | .negrita { | ||
| + | font-weight: bold; | ||
| + | } | ||
| + | </sxh> | ||
| + | |||
| + | <sxh js;highlight: [4]> | ||
| + | var app = angular.module("app", []); | ||
| + | |||
| + | app.controller("PruebaController", function($scope) { | ||
| + | $scope.clasesCss={ | ||
| + | rojo:true, | ||
| + | subrayado:true, | ||
| + | negrita:false | ||
| + | } | ||
| + | }); | ||
| + | </sxh> | ||
| + | |||
| + | * 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. | ||
| + | |||
| + | <sxh html> | ||
| + | <div ng-class="clasesCss">Este es un texto con clases dinámicas</div> | ||
| + | </sxh> | ||
| + | |||
| + | 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: | ||
| + | |||
| + | <sxh html> | ||
| + | <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> | ||
| + | </sxh> | ||
| + | |||
| + | Gracias a estos "checkbox" podemos fácilmente modificar qué estilos se aplican a un tag HTML. | ||
| + | |||
| + | <note> | ||
| + | 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. | ||
| + | </note> | ||
| ===== Ejemplo ===== | ===== Ejemplo ===== | ||
| + | El código completo del ejemplo es: | ||
| - | {{url>http://embed.plnkr.co/pe2RVo}} | + | <sxh css;title:style.css> |
| + | .rojo { | ||
| + | color: red; | ||
| + | } | ||
| + | .subrayado { | ||
| + | text-decoration: line-through; | ||
| + | } | ||
| + | .negrita { | ||
| + | font-weight: bold; | ||
| + | } | ||
| + | </sxh> | ||
| + | <sxh html;title:index.html;highlight: [17]> | ||
| + | <!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> | ||
| + | </sxh> | ||
| + | |||
| + | * Linea 17: Con la directiva ''ng-class'' se indica el nombre de la propiedad que contiene las clases a mostrar. | ||
| + | |||
| + | <sxh js;title:script.js;highlight: [4,5,6,7,8]> | ||
| + | var app = angular.module("app", []); | ||
| + | |||
| + | app.controller("PruebaController", function($scope) { | ||
| + | $scope.clasesCss={ | ||
| + | rojo:true, | ||
| + | subrayado:true, | ||
| + | negrita:false | ||
| + | } | ||
| + | }); | ||
| + | </sxh> | ||
| + | |||
| + | * Linea 4: El objeto con las clases que pueden o no añadirse al tag HTML | ||
| + | |||
| + | {{url>http://embed.plnkr.co/pe2RVo}} | ||
| ===== Referencias ===== | ===== Referencias ===== | ||
| * [[https://docs.angularjs.org/api/ng/directive/ngClass|ng-class]] | * [[https://docs.angularjs.org/api/ng/directive/ngClass|ng-class]] | ||
