Angular JS - Not setting class for bootstrap 3

Question

Following code is not working. It is supposed to show error or warning alert. Am I doing it correct?

<div ng-controller="HeaderController">
    <div ng-class='{alert-danger:show, warning:isWarning}' class="alert" ng-show="show">{{messageText}}</div>
    <button ng-click='showError()'>Simulate Error</button>
    <button ng-click='showWarning()'>Simulate Warning</button>
</div>

</div>

and

<script>

    var HeaderController = function ($scope) {
        $scope.isError = false;
        $scope.isWarning = false;
        $scope.show = false;

        $scope.showError = function () {
            $scope.messageText = 'This is an error!';
            $scope.isError = true;
            $scope.isWarning = false;
            $scope.show = true;
        };

    }
</script>

possible duplicate of [What is the best way to conditionally apply a class with angularjs?](http://stackoverflow.com/questions/7792652/what-is-the-best-way-to-conditionally-apply-a-class-with-angularjs) — Stewie, Dec 05 '13 at 17:17

score 1 · Accepted Answer · answered Dec 05 '13 at 17:19

You should wrap the class, in ng-class with a single quotes:

<div ng-class="{'alert-danger':show, 'warning':isWarning}" class="alert" ng-show="show">{{messageText}}</div>

It was "documented" on a comment in the ng-class docs, but they removed the discuss from there.

Angular JS - Not setting class for bootstrap 3

1 Answers1