menú
buscar
Diferencias
Muestra las diferencias entre dos versiones de la página.
|
unidades:04_masdirectivas:10_ngclass [2014/08/01 00:21] admin [Ejemplo] |
unidades:04_masdirectivas:10_ngclass [2014/08/30 09:52] (actual) admin |
||
|---|---|---|---|
| Línea 31: | Línea 31: | ||
| </sxh> | </sxh> | ||
| - | * Línea 4: Se declara la propiedad "clasesCss" que contiene 3 propiedades, una por cada uno de las 3 clases CSS. Solo están a ''true'' las propiedades ''rojo'' y ''subrayado'' por lo que solo se aplicarán estas 2 clases CSS al elemento. | + | * 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> | <sxh html> | ||
| Línea 39: | Línea 39: | ||
| Ahora al aplicar la directiva ''ng-class'' al tag ''<div>'' se aplicarán las clases CSS "rojo" y "subrayado". | Ahora al aplicar la directiva ''ng-class'' al tag ''<div>'' se aplicarán las clases CSS "rojo" y "subrayado". | ||
| - | Pero ahora todo esto tiene una ventaja. Al ser valores del $scope los podemos modificar desde AngularJS y automáticamente se modificarán las clases CSS. | + | 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: | Ahora podemos añadir los siguientes tags <input> para modificar desde la propia página las clases CSS que se aplican: | ||
| Línea 52: | Línea 52: | ||
| </sxh> | </sxh> | ||
| - | Gracias a estos "checkbox" podemos fácilmente modificar que estilos se aplican a un tag HTML. | + | Gracias a estos "checkbox" podemos fácilmente modificar qué estilos se aplican a un tag HTML. |
| <note> | <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. | 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> | </note> | ||
| Línea 73: | Línea 75: | ||
| </sxh> | </sxh> | ||
| - | <sxh html;title:index.html> | + | <sxh html;title:index.html;highlight: [17]> |
| <!DOCTYPE html> | <!DOCTYPE html> | ||
| <html ng-app="app"> | <html ng-app="app"> | ||
| Línea 96: | Línea 98: | ||
| </sxh> | </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> | + | <sxh js;title:script.js;highlight: [4,5,6,7,8]> |
| var app = angular.module("app", []); | var app = angular.module("app", []); | ||
| Línea 109: | Línea 112: | ||
| </sxh> | </sxh> | ||
| + | * Linea 4: El objeto con las clases que pueden o no añadirse al tag HTML | ||
| {{url>http://embed.plnkr.co/pe2RVo}} | {{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]] | ||
