ngClass - creating a class name containing angular expression

Question

I would like to create class names based on an the evaluation of an angular expression, but it seems that angular is removing these expressions from the eventually compiled classes. When iterating over cells, assume the following code:

<td ng-class="{'label{{cell.count}}': !!cell.count}"></td>

My goal is that when cell.count = 1 the resulting class will be "label1", when cell.count = 2, "label2", etc. In practice, what happens is that angular discards the expression in the eventual class - As long as !!cell.count, I get the class "label" regardless of the count. How can I achieve this?

This may be of use - stackoverflow.com/questions/28208165/…. The return value of the function will determine the class applied — Mark Walters
– Mark Walters, Commented Sep 10, 2015 at 15:24

Duncan · Accepted Answer · 2015-09-10 15:22:43Z

2

Try this:

<td ng-class="{'label'+cell.count: !!cell.count}"></td>

If it gets too complicated you can also move the entire object out into a function in the scope.

<td ng-class="getCellClass()"></td>

and then:

$scope.getCellClass = function() { ... }

Your problem is that the {{...}} substitution isn't appropriate here. You have to use an angular expression to create the object, or if you call a method on the scope you can do any javascript you need to create it.

answered Sep 10, 2015 at 15:22

Duncan

96.4k15 gold badges129 silver badges160 bronze badges

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

1 Comment

tome Over a year ago

'label'+cell.count does not work, angular does not approve of the plus sign here, and does not concatenate strings. Regarding your second suggestion - that's what I'm trying to avoid, I don't want to place my CSS classes logic inside of the controller, and was hoping to find a way around it

nephiw · Accepted Answer · 2018-09-21 22:06:01Z

0

Did you ever try: <td ng-class="'label' + cell.count"></td> - simply not using the curly braces works for me in my project (angular 1.5).

answered Sep 21, 2018 at 22:06

nephiw

2,06620 silver badges42 bronze badges

Comments

Martin · Accepted Answer · 2019-01-10 07:47:53Z

0

I had the same issue. I managed to solve it like this:

<td ng-class="{['label' + cell.count]: !!cell.count}"></td>

answered Jan 10, 2019 at 7:47

Martin

1

Collectives™ on Stack Overflow

ngClass - creating a class name containing angular expression

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related