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:

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

Y a un tag HTML le ponemos lo siguiente:

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

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

Ejemplo

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

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.1406836936.txt.gz · Última modificación: 2014/07/31 22:02 por admin

Ir hasta arriba