javascript - Chain multiple expressions in AngularJS ng-class

I'm trying to chain two different expressions into an ng-class, one of them have a filter applied to it, something like:

<body ng-class="controller | camel2hyphens" ng-class="{overflow: isOverflow}">

But Angular only uses one of the them (which makes sense).

I've tried using an array of expression this way:

<body ng-class="[(controller | camel2hyphens), {overflow: isOverflow}]">

But the CSS class that is set is:

class="login-controller [object Object]"

Is there any way to acplish this with ng-class (without writing a method in the Controller with the logic).

Thanks!

I'm trying to chain two different expressions into an ng-class, one of them have a filter applied to it, something like:

<body ng-class="controller | camel2hyphens" ng-class="{overflow: isOverflow}">

But Angular only uses one of the them (which makes sense).

I've tried using an array of expression this way:

<body ng-class="[(controller | camel2hyphens), {overflow: isOverflow}]">

But the CSS class that is set is:

class="login-controller [object Object]"

Is there any way to acplish this with ng-class (without writing a method in the Controller with the logic).

Thanks!

Share Improve this question asked Sep 30, 2013 at 16:33 yorch 7,3288 gold badges34 silver badges39 bronze badges

does ng-class="{overflow: isOverflow} {{controller | camel2hyphens}}" work? – Strawberry Commented Sep 30, 2013 at 16:52
Or something like class='{{controller|camel2hyphens}}' for the first expression – Chandermani Commented Sep 30, 2013 at 16:55
@Strawberry thanks, but it does not work, it prints the controller variable into the ng-class directly: <body ng-class="{overflow: isOverflow} login-controller" class="overflow"></div> – yorch Commented Sep 30, 2013 at 17:28
@Chandermani that did it, thanks! but I was looking for a way to chain both expressions in the same ng-class – yorch Commented Sep 30, 2013 at 17:29

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

You can use class in bination with ng-class

<body class="{{controller | camel2hyphens}}" ng-class="{overflow: isOverflow}">

Seems like the way you tried to do it is only supported with Angular >=1.4.

For Angular 1.2 and 1.3:

If the expression evaluates to an array, each element of the array should be a string that is one or more space-delimited class names.

This way, your own suggestion was the best because all code stays inside of ng-class.

ng-class="[(controller | camel2hyphens), isOverflow ? 'overflow' : '']