I have an element which has static CSS classes and dynamic classes which will be determined by a method, so how do I put them together?

I tried below code, but it does not work:

<div class="static-class" ng-class="{'dynamic-class': isEnabled()}"></div>

So as a workaround I did this:

<div ng-class="{'static-class': true, 'dynamic-class': isEnabled()}"></div>

But this is ugly, especially when there are many static classes.

EDIT
I found my first example works! Sorry for for this question.

I have an element which has static CSS classes and dynamic classes which will be determined by a method, so how do I put them together?

I tried below code, but it does not work:

<div class="static-class" ng-class="{'dynamic-class': isEnabled()}"></div>

So as a workaround I did this:

<div ng-class="{'static-class': true, 'dynamic-class': isEnabled()}"></div>

But this is ugly, especially when there are many static classes.

EDIT
I found my first example works! Sorry for for this question.

• javascript
• css
• angularjs

• 7 Are you sure your first example does not work ? I've been doing it this way for some time without problem. – David Lin Commented Jan 7, 2014 at 6:41
• The first example work, e.g. jsfiddle/PrmRL/1 , however that's assuming isEnabled() works. – towr Commented Jan 7, 2014 at 6:47
• Your example works even with Angular version 1.0.1 : jsfiddle/cherniv/PrmRL/3 – Ivan Chernykh Commented Jan 7, 2014 at 7:12

1 Answer 1

Your first example should work:

<div class="static-class" ng-class="{'dynamic-class': isEnabled()}"></div>

Alternatively you can also use:

<div class="static-class ng-class: {'dynamic-class': isEnabled()};"></div>