menú
buscar
Diferencias
Muestra las diferencias entre dos versiones de la página.
|
unidades:04_masdirectivas:09_ngstyle [2014/07/31 21:32] admin creado |
unidades:04_masdirectivas:09_ngstyle [2014/08/29 23:07] (actual) admin |
||
|---|---|---|---|
| Línea 1: | Línea 1: | ||
| ====== 4.9 ng-style ====== | ====== 4.9 ng-style ====== | ||
| + | Esta directiva permite modificar el estilo CSS de un tag pero definiendo el estilo como un objeto del ''$scope''. Dicho objeto tendrá propiedades cuyo nombre será el nombre del estilo CSS y el valor de la propiedad será el valor del estilo CSS. | ||
| + | Es decir que si creamos el siguiente objeto JavaScript en el ''$scope'': | ||
| + | <sxh js> | ||
| + | $scope.estilo={ | ||
| + | color:"#FF0000", | ||
| + | backgroundColor:'yellow' | ||
| + | } | ||
| + | </sxh> | ||
| + | y a un tag HTML le ponemos lo siguiente: | ||
| + | <sxh html> | ||
| + | <div ng-style="estilo" >Este es un texto con colores dinámicos</div> | ||
| + | </sxh> | ||
| + | |||
| + | siendo ''estilo'' el nombre de la propiedad del ''$scope'' que tiene el objeto JavaScript con las propiedades CSS | ||
| + | |||
| + | Se le pondrá al div el estilo siguiente: | ||
| + | style="color:#FF0000;background-color:yellow" | ||
| + | |||
| + | Pero ahora todo ésto tiene una ventaja. Al ser valores del ''$scope'' los podemos modificar desde AngularJS y automáticamente se modificará el estilo CSS. | ||
| + | |||
| + | Ahora podemos añadir los siguientes tags ''<input>'' para modificar desde la propia página los colores: | ||
| + | <sxh html> | ||
| + | Escribe el color del texto (formato HTML):<input ng-model="estilo.color" > | ||
| + | Escribe el color del fondo (formato HTML):<input ng-model="estilo.backgroundColor" > | ||
| + | </sxh> | ||
| + | |||
| + | <note tip> | ||
| + | Personalmente me sigue sorprendiendo lo fácil que es hacer modificaciones en el DOM solamente modificando información desde JavaScript. En este caso ha sido el estilo CSS, pero con ''ng-if'' , ''ng-repeat'' , ''ng-options'' o la siguiente que vamos a ver [[unidades:04_masdirectivas:10_ngclass|ng-class]] también es muy sencillo hacer modificaciones en el DOM. | ||
| + | |||
| + | Con herramientas así usar jQuery para modificar el DOM parece cosa del siglo pasado. :-) | ||
| + | </note> | ||
| ====== Ejemplo ====== | ====== Ejemplo ====== | ||
| - | {{url>http://embed.plnkr.co/}} | + | <sxh html;title:index.html;highlight: [14]> |
| + | <!DOCTYPE html> | ||
| + | <html ng-app="app"> | ||
| + | <head> | ||
| + | <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script> | ||
| + | <script src="script.js"></script> | ||
| + | </head> | ||
| + | <body ng-controller="PruebaController"> | ||
| + | |||
| + | Escribe el color del texto (formato HTML):<input ng-model="estilo.color"> | ||
| + | <br> | ||
| + | Escribe el color del fondo (formato HTML):<input ng-model="estilo.backgroundColor"> | ||
| + | <br> | ||
| + | <br> | ||
| + | <div ng-style="estilo">Este es un texto con colores dinámicos</div> | ||
| + | |||
| + | </body> | ||
| + | </html> | ||
| + | </sxh> | ||
| + | |||
| + | * Linea 14: Se indica la propiedad del ''$scope'' que tiene los estilos CSS del elemento | ||
| + | |||
| + | <sxh js;title:script.js;highlight: [4,5,6,7]> | ||
| + | var app = angular.module("app", []); | ||
| + | |||
| + | app.controller("PruebaController", function($scope) { | ||
| + | $scope.estilo={ | ||
| + | color:"#FF0000", | ||
| + | backgroundColor:'yellow' | ||
| + | } | ||
| + | }); | ||
| + | </sxh> | ||
| + | |||
| + | * Linea 4: Se define la propiedad del ''$scope'' con los estilos CSS | ||
| + | {{url>http://embed.plnkr.co/Ggeuo9}} | ||
| ====== Referencias ====== | ====== Referencias ====== | ||
| * [[https://docs.angularjs.org/api/ng/directive/ngStyle|ng-style]] | * [[https://docs.angularjs.org/api/ng/directive/ngStyle|ng-style]] | ||
