Ejercicio angular class
HTML
01. Al clickear sobre las opciones deberia cambiar el color segun el estado
02. agregar una clase que muestre o oculte el status
<div ng-app="statusColor">
<div id="status">
<div class="status-rec" ng-class="{ok: ok, warning: warning}" ng-show="visible">
<p >Warning</p>
</div>
</div>
<form action="">
<input type="radio" name="status" value="alert" ng-model="status"><label>Alert</label>
<input type="radio" name="status" value="warning" ng-model="status"><label>Warning</label>
<input type="radio" name="status" value="ok" ng-model="status"><label>Ok</label>
</form>
<form action="">
<input type="checkbox" name="status" ng-model="visible"><label>visible</label>
</form>
</div>
CSS
form{text-align:center; display:block; width:100%; padding:10px;}
input,label{display:inline-block; }
input{margin: 0 0 0 20px;}
label{padding: 0 5px;}
#status{text-align:center;}
.status-rec{display:inline-block; width:80px; height:80px; padding:10px; border-radius:20px; background:white; margin:20px;}
.status-rec p{text-transform:uppercase; font-size:11px; font-weight:bold; padding:20px 0;}
.alert{background:red; color:#fff;}
.warning{background:yellow; color:#000;}
.ok{background:green; color:#fff;}
JavaScript
var app = angular.module('statusColor', []);