Steve Steve - 1 year ago 183
Javascript Question

Angular Js combine a fixed ng-class with an expression in same tag?

I have a tag:

<body ng-cloak class="foobar" ng-class="{'fixed-header': settings.isFixed}">

In another similar project I have a similar:

<body ng-cloak class="foobar" ng-class="routeClassName">

How can I apply both the
and the conditional class?

I have tried

<body ng-cloak class="foobar" ng-class="{'routeClassName','fixed-header': settings.isFixed}">

and similar, but it throws an error. So I guess my syntax is off....

Answer Source

Here are two ways to accomplish this:

First being, just have Angular interpolate the value since it is just the class name string anyway and then use ngClass for your conditional:

<body ng-cloak class="foobar {{routeClassName}}" ng-class="{'fixed-header': settings.isFixed}">

Second being, use true in the statement you have tried:

<body ng-cloak class="foobar" ng-class="{'routeClassName': true, 'fixed-header': settings.isFixed}">

I would lean toward the first option since ngClass is meant for conditional classes based on expressions.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download