Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

unidades:04_masdirectivas:09_ngstyle [2014/07/31 22:10]
admin [Ejemplo]
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>​
  
-a un tag HTML le ponemos lo siguiente:+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 28: Línea 28:
 </​sxh>​ </​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 ======
  
Línea 67: Línea 70:
   * Linea 4: Se define la propiedad del ''​$scope''​ con los estilos CSS   * Linea 4: Se define la propiedad del ''​$scope''​ con los estilos CSS
  
-{{url>​http://​embed.plnkr.co/​Ggeuo99}}+{{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]]
unidades/04_masdirectivas/09_ngstyle.1406837433.txt.gz · Última modificación: 2014/07/31 22:10 por admin
Ir hasta arriba
CC Attribution-Share Alike 3.0 Unported
chimeric.de = chi`s home Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0