Search code examples
angularjsng-class

ng-class not taking both classes

i have an ng-class like this 

ng-class="{'alert alert-success': response.submitSuccess , 'alert alert-danger': !response.submitSuccess  }"

the problem is , suppose "response.submitSuccess" returns true , only alert-success class is added and not the alert class.

Solution

  • Doesn't it make more sense to make the alert class permanent then? (rhetorical question)

    You can do it like this: 

    class="alert" ng-class="{'alert-success': response.submitSuccess , 'alert-danger': !response.submitSuccess}"

    And this is the reason for the behaviour (it removes the alert class that was previously set by the !response.submitSuccess condition because it was falsy before):

    When the expression changes, the previously added classes are removed and only then the new classes are added.

    From: http://docs.angularjs.org/api/ng/directive/ngClass