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
:
$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 é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:
Escribe el color del texto (formato HTML):<input ng-model="estilo.color" > Escribe el color del fondo (formato HTML):<input ng-model="estilo.backgroundColor" >
ng-if
, ng-repeat
, ng-options
o la siguiente que 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.
<!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>
$scope
que tiene los estilos CSS del elemento
var app = angular.module("app", []); app.controller("PruebaController", function($scope) { $scope.estilo={ color:"#FF0000", backgroundColor:'yellow' } });
$scope
con los estilos CSS