Angular Js: CSS Style

by Nhat Nguyen

HTML

<div ng-app>
    <div ng-controller="headerController">
        <div ng-class='{error: isError, warning: isWarning}'>{{messageText}}</div>
        <button ng-click='showError()'>Simulate Error</button>
        <button ng-click='showWarning()'>Simulate Warning</button>
    </div>
</div>

CSS

.error {
    background-color: red;
}
.warning {
    background-color: yellow;
}

JavaScript

function headerController($scope) {
    $scope.isError = false;
    $scope.isWarning = false;
    $scope.showError = function () {
        $scope.messageText = 'This is an error!';
        $scope.isError = true;
        $scope.isWarning = false;
    };
    $scope.showWarning = function () {
        $scope.messageText = 'Just a warning.  Please carry on.';
        $scope.isWarning = true;
        $scope.isError = false;
    };
}