AngularJS classMap directive
HTML
<div ng-app="myModule">
<div ng-controller="myController">
<div ng-class="{'red' : _red, bold : _bold,'multiple things' : shouldUseMultiple()}" >ng-class base</div>
<input type="checkbox" ng-model="_red">red</input>
<input type="checkbox" ng-model="_bold">bold</input>
<br />
_red: {{_red}}
<br />
_bold: {{_bold}}
<br />
should use multiple: {{ shouldUseMultiple() }}
</div>
</div>
CSS
.red
{
color:blue;
}
.bold
{
font-weight: bold;
}
.multiple
{
font-size: 72pt;
}
.things
{
background-color:orange;
}
JavaScript
var myModule = angular.module('myModule', []);
myModule.controller('myController', function($scope) {
$scope._red = true;
$scope._bold = false;
$scope.shouldUseMultiple = function(){return this._red ^ this._bold;};
});