AngularJS - multiple class ng-class
Have multiple conditions within the ng-class object
HTML
<div ng-app="myModule">
<div ng-controller="myController">
<button ng-click="onEnabled()" ng-model="myButton">Toggle</button>
<div ng-style="myStyle" ng-class="{'in' : areaStatus, 'collapsed' : !areaStatus}">This is some text</div>
</div>
</div>
CSS
.in {
color:red;
}
.collapsed {
color:green;
}
div {
border: 1px solid;
}
JavaScript
var myModule = angular.module('myModule', []);
myModule.controller('myController', function ($scope) {
$scope.areaStatus = true;
$scope.enabled = false;
$scope.myStyle = {
'height': '0px'
}
$scope.onEnabled = function () {
if ($scope.enabled) {
$scope.areaStatus = true;
$scope.myStyle = {
'height': '0px'
}
$scope.enabled = !$scope.enabled
} else {
$scope.areaStatus = false;
$scope.myStyle = {
'height': '50px'
}
$scope.enabled = !$scope.enabled
}
};
});