(AngularJS) dynamically set CSS class by databinding

Question

I notices that when I mix ng-class with class + expression (class="something-{{ stuff }}") which might not be set, the ng-class is not getting compiled.

Example:

This will work OK (JSFIDDLE)

<div 
     ng-controller="MainCtrl" 
     ng-class="(data.size > 10) ? 'font-large' : 'font-small'"
     >
     Lorem ipsum dolor sit amet

But when I use ng-class & class with expression (which does not exist on the scope) it will not work, it will not run/compile ng-class. (JSFIDDLE):

<div
    ng-controller="MainCtrl"
    class="just-a-class color-{{ data.color }}"
    ng-class="(data.size > 10) ? 'font-large' : 'font-small'"
    >
    Lorem ipsum dolor sit amet.
</div>

Is there any way to use both ng-class and class with expression or what is the workaround? Any suggestions much appreciated.

Your second jsfiddle works fine for me. The divs classes in Chrome Version 37.0.2062.120 (64-bit): just-a-class color-red font-small — kasoban
– kasoban, Commented Sep 16, 2014 at 9:08
I've done tidy-up and looks like is working OK now, I try to reproduce one more time. — Iladarsda
– Iladarsda, Commented Sep 16, 2014 at 9:13
Another way jsfiddle.net/satpalsingh/647792as just modified your second working fiddle — Satpal
– Satpal, Commented Sep 16, 2014 at 9:15
@kasoban I was able to reproduce, the issues is visible when I try to bind something that does not exist on the scope, see fiddle — Iladarsda
– Iladarsda, Commented Sep 16, 2014 at 9:35

Nitsan Baleli · Accepted Answer · 2014-09-16 10:40:29Z

2

When you need to add a class with data binding or condition, use ng-class.

from angularjs's ng-class doc:

The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.

This version is working well (jsfiddle)

It uses only ng-class, with out the regular class

<div ng-controller="MainCtrl" 
    ng-class="{'font-large' : (data.size >= 10), 
                'font-small' : (data.size < 10),
                'color-{{ data.nothing }}' : color.nothing }">

    Lorem ipsum dolor sit amet
</div>

this way ng-class will process the 'color-{{data.nothing}}' only if data.nothing is true

edited Sep 16, 2014 at 10:40

answered Sep 16, 2014 at 10:09

Nitsan Baleli

5,4683 gold badges35 silver badges54 bronze badges

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

3 Comments

Iladarsda Over a year ago

I think the issues is that ng-class is not getting compiled when the data.nothing does not exist. github.com/angular/angular.js/issues/9109

Iladarsda Over a year ago

very nice example, I might move all of my class expression to the ng-class . What is best practice here?

Nitsan Baleli Over a year ago

yes, ng-class is designed for that. please accept answer if it helped.

Collectives™ on Stack Overflow

(AngularJS) dynamically set CSS class by databinding

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related