AngularJS how to put both ng-class and CSS class

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.

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

Emma Guo · Accepted Answer · 2014-01-07 07:46:00Z

12

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>

answered Jan 7, 2014 at 7:46

Emma Guo

5314 silver badges9 bronze badges

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

1 Answer 1