<!DOCTYPE html>
<html ng-app="appEstilos">
<head>
<meta charset="utf-8">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<style>
.claseGrande { font-family:arial;color:red;font-size:34px;}
</style>
</head>
<body>
<div ng-controller ="controlador1">
<p ng-style="estilo_parrafo">En un lugar de la mancha</p>
<p>Erase una vez <span ng-class="claseLSG">dentro de un mundo</span> gris</p>
<button ng-click="cambiar_estilo();">Cambiar estilo del párrafo</button>
<button ng-click="asignar_clase();">Asignar clase</button>
<button ng-click="borrar_estilos();">Limpiar</button>
</div>
<script>
var appLSG = angular.module('appEstilos', []);
appLSG.controller('controlador1', ['$scope', function($scope) {
$scope.cambiar_estilo = function() {
$scope.estilo_parrafo = { 'background':'#2C2961', 'color':'#FFF'}
}
$scope.asignar_clase = function() {
$scope.claseLSG = "claseGrande";
}
$scope.borrar_estilos = function() {
$scope.estilo_parrafo = "";
$scope.claseLSG = "";
}
}]);
</script>
</body>
</html>
Visibilidad (mostrar/ocultar)
<div ng-controller ="controlador1">
<p ng-show="mensaje">En un lugar de la mancha</p>
<button ng-click="cambiando(true);">Mostrar mensaje</button>
<button ng-click="cambiando(false);">Ocultar mensaje</button>
</div>
<script>
var appLSG = angular.module('appEstilos', []);
appLSG.controller('controlador1', ['$scope', function($scope) {
$scope.cambiando = function(valor) {
$scope.mensaje = valor;
}
}]);
</script>
Imágenes:
<div ng-controller ="controlador1">
<img ng-src="{{imagen_cargar}}"><br>
<button ng-click="cambiando('james_stewart.jpg');">James Stewart</button>
<button ng-click="cambiando('gary_cooper.jpg');">Gary Cooper</button>
</div>
...
$scope.cambiando = function(imagen) {
$scope.imagen_cargar = imagen;
}
No hay comentarios:
Publicar un comentario