(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.

Answer 1

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