Steve Steve - 4 months ago 26
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
routeClassName
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

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.

Comments