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? — Stewie
– Stewie, Commented Dec 5, 2013 at 17:17

D.Evangelista · Accepted Answer · 2013-12-05 17:19:32Z

1

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.

answered Dec 5, 2013 at 17:19

D.Evangelista

6,5511 gold badge28 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular JS - Not setting class for bootstrap 3

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related