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.

Es decir que si creamos el siguiente objeto JavaScript en el $scope:

1

2

3

4

$scope.estilo={
  color:"#FF0000",
  backgroundColor:'yellow'
}

Y a un tag HTML le ponemos lo siguiente:

1	`<div` `ng-style="estilo"` `>Este es un texto con colores dinámicos</div>`

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 esto 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:

1 2	`Escribe el color del texto (formato HTML):<input` `ng-model="estilo.color"` `>` `Escribe el color del fondo (formato HTML):<input` `ng-model="estilo.backgroundColor"` `>`

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 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.

Ejemplo

index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17	`<!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>`

Linea 14: Se indica la propiedad del $scope que tiene los estilos CSS del elemento

script.js
1 2 3 4 5 6 7 8	`var` `app = angular.module("app", []);` `app.controller("PruebaController",` `function($scope) {` `$scope.estilo={` `color:"#FF0000",` `backgroundColor:'yellow'` `}` `});`

Linea 4: Se define la propiedad del $scope con los estilos CSS

Referencias

ng-style

unidades/04_masdirectivas/09_ngstyle.1406837961.txt.gz · Última modificación: 2014/07/31 22:19 por admin

Ir hasta arriba