<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div ng-app="ngClass" ng-controller="ngClassController as cl">
<h1 ng-class="cl.titular">Títular</h1>
<select ng-model="cl.titular">
<option value="pequenno">Pequeño</option>
<option value="grande">Grande</option>
</select>
<h2 ng-class="cl.clases">Control del valor</h2>
¿Cuánto? <input type="text" ng-model="cl.cuanto" size="4" placeholder="0" />
<br />
<p ng-class="{positivo: cl.cuanto>=0, negativo: cl.cuanto<0}">
El valor es <span>{{cl.cuanto}}</span>
</p>
</div>
</body>
</html>
.negativo {
color: red;
}
.positivo {
color: #33f;
}
.pequenno{
font-size: 10pt;
}
.grande{
font-size: 18pt;
}
.fondo{
background-color: orange;
}
.color{
color: #fff;
}
.tamanno{
font-size: 30px;
}
angular
.module('ngClass', [])
.controller("ngClassController", controladorPrincipal);
function controladorPrincipal(){
//esta función es mi controlador
var cl = this;
cl.total = 0;
cl.titular = "pequenno"
cl.clases = ["fondo", "color", "tamanno"];
};
Also see: Tab Triggers