menú
buscar
Diferencias
Muestra las diferencias entre dos versiones de la página.
|
unidades:04_masdirectivas:09_ngstyle [2014/07/31 22:19] admin [4.9 ng-style] |
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 de la propiedad será el nombre del estilo CSS y el valor de la propiedad será el valor del estilo CSS. | + | 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'': | Es decir que si creamos el siguiente objeto JavaScript en el ''$scope'': | ||
| Línea 10: | Línea 10: | ||
| </sxh> | </sxh> | ||
| - | Y a un tag HTML le ponemos lo siguiente: | + | y a un tag HTML le ponemos lo siguiente: |
| <sxh html> | <sxh html> | ||
| <div ng-style="estilo" >Este es un texto con colores dinámicos</div> | <div ng-style="estilo" >Este es un texto con colores dinámicos</div> | ||
| </sxh> | </sxh> | ||
| - | Siendo ''estilo'' el nombre de la propiedad del ''$scope'' que tiene el objeto JavaScript con las propiedades CSS. | + | 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: | Se le pondrá al div el estilo siguiente: | ||
| style="color:#FF0000;background-color:yellow" | style="color:#FF0000;background-color:yellow" | ||
| - | Pero ahora todo esto tiene una ventaja. Al ser valores del ''$scope'' los podemos modificar desde AngularJS y automáticamente se modificará el estilo CSS. | + | 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: | Ahora podemos añadir los siguientes tags ''<input>'' para modificar desde la propia página los colores: | ||
| Línea 29: | Línea 29: | ||
| <note tip> | <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 qiue vamos a ver [[unidades:04_masdirectivas:10_ngclass|ng-class]] también es muy sencillo hacer modificaciones en el DOM. | + | 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. :-) | Con herramientas así usar jQuery para modificar el DOM parece cosa del siglo pasado. :-) | ||
