Angular Checkboxes
Checkboxes, who needs them?
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<script src="http://code.angularjs.org/angular-1.0.0rc7.js"></script>
<div ng-app="app">
<div class="container" ng-controller="Ctrl">
<div class="row">
<div class="span2 well">
<h4>Permissions</h4>
<div ng-click="p.IS_ACTIVE=0" ng-show="p.IS_ACTIVE == 1" class="label label-success"><i class="icon-check"></i> Active</div>
<div ng-click="p.IS_ACTIVE=1" ng-show="p.IS_ACTIVE == 0" class="label label-important"><i class="icon-plus-sign"></i> Inactive</div>
<div ng-click="p.IS_DEVELOPER=0" ng-show="p.IS_DEVELOPER == 1" class="label label-success"><i class="icon-check"></i> Developer</div>
<div ng-click="p.IS_DEVELOPER=1" ng-show="p.IS_DEVELOPER == 0" class="label"><i class="icon-plus-sign"></i> Developer</div>
<div ng-click="p.IS_SYSADMIN=0" ng-show="p.IS_SYSADMIN == 1" class="label label-success"><i class="icon-check"></i> Sys Admin</div>
<div ng-click="p.IS_SYSADMIN=1" ng-show="p.IS_SYSADMIN == 0" class="label"><i class="icon-plus-sign"></i> Sys Admin</div>
<div ng-click="p.IS_MANAGER=0" ng-show="p.IS_MANAGER == 1" class="label label-success"><i class="icon-check"></i> Manager</div>
<div ng-click="p.IS_MANAGER=1" ng-show="p.IS_MANAGER == 0" class="label"><i class="icon-plus-sign"></i> Manager</div>
<div ng-click="p.IS_USER=0" ng-show="p.IS_USER == 1" class="label label-success"><i class="icon-check"></i> User</div>
<div ng-click="p.IS_USER=1" ng-show="p.IS_USER == 0" class="label"><i class="icon-plus-sign"></i> User</div>
</div>
<div class=" well span2">
<h4>Permissions Object</h4>
<pre>{{p}}</pre></div>
</div>
</div>
CSS
h4{
margin-bottom:0.5em;
}
div{
margin-bottom:0.5em;
cursor:pointer;
}
JavaScript
var app = angular.module("app", []);
function Ctrl($scope) {
$scope.p= {
"IS_ACTIVE": 0.0,
"IS_DEVELOPER": 0.0,
"IS_SYSADMIN": 0.0,
"IS_MANAGER": 0.0,
"IS_USER": 0.0
};
}