Complex angular js ng-class

Question

I have the component and have a problem setting the css class to it. I want it to always have a class of "box", then to have additional classes specified by the directive "class" argument and one conditional class "mini".

Conceptually what I want to achieve is something like this:

<div class="box {{class}}" data-ng-class="{mini: !isMaximized}">
...
</div>

The problem is that when I set the class html attribute, the ng-class attribute is omitted. How to make my example work without changing the controller? Is it even possible, or should I set the class in the controller instead (which I wish to avoid)?

Looks like this is not an issue anymore with latest Angular.js version and the example above working out of the box. — Juicy Scripter, Jul 04 '13 at 10:29

score 62 · Answer 1 · edited Jul 16 '14 at 15:09

62

A quick solution would be define the box class inside ng-class attribute:

<div data-ng-class="{mini: !isMaximized, box: true}"></div>

If you want to include a scope variable as a class, you can't use ng-class:

<div class="{{class}} box {{!isMaximized && 'mini' || ''}}">

Angular expressions do not support the ternary operator, but it can be emulated like this:

condition && (answer if true) || (answer if false)

edited Jul 16 '14 at 15:09

Qix - MONICA WAS MISTREATED

14,451
16
82
145

answered Nov 28 '12 at 15:05

Andre Goncalves

3,840
2
21
15

1

What about assigning user specified attribute: {{class}} ? – Szymon Wygnański Nov 28 '12 at 15:23
revised my response to include a user specified class. – Andre Goncalves Nov 28 '12 at 15:57
4

YOU, ARE, AWESOME! This saved me: "If you want to include a scope variable as a class, you can't use ng-class" – rooftop Apr 25 '13 at 20:36
9

Also, AngularJS now has the ternary conditional operator. – Zach Snow Jun 18 '13 at 22:08
1

@SiCK Please do not edit code, especially when your edit is completely incorrect. – Qix - MONICA WAS MISTREATED Jul 16 '14 at 15:09

score 12 · Accepted Answer · answered Feb 25 '15 at 23:40

12

I needed multiple classes where one was $scope derived and others were literal classes. Thanks to the hint from Andre, below worked for me.

<h2 class="{{workStream.LatestBuildStatus}}" 
    ng-class="{'expandedIcon':workStream.isVisible,  'collapsedIcon':!workstream.isvisible}">{{workStream.Name}}</h2>

answered Feb 25 '15 at 23:40

Nitin Arora

136
1
3

1

In newer versions of angular this actually works and is the best solution for the problem. – Szymon Wygnański Feb 26 '15 at 13:18

score 4 · Answer 3 · edited May 23 '17 at 12:09

Edit: for newer versions of Angular see Nitins answer as it is the best one atm

For me, this worked (I'm working on AngularJS v1.2.14 at the moment so I guess 1.2.X+ should support this, not sure about the earlier versions):

<div class="box" data-ng-class="{ {{myScopedObj.classesToAdd}}: true, mini: !isMaximized }"></div>

I replaced your {{class}} with {{myScopedObj.classesToAdd}} to show that any scoped variable or even a bit more complex object can be used this way.

So, every DIV element crated this way will have "box" class and any class contained within myScopedObj.classesToAdd (useful when using ng-repeat and every element in the array needs to have a different class applied), and it will have the "mini" class if !isMaximized.

With this, I was able to do something like: `
`
– dduft Feb 11 '15 at 14:16 — dduft, Feb 11 '15 at 14:16

denixtry · Answer 4 · 2015-05-09T04:33:51.090

Another way to do this without double curly braces and includes scope variables, tested with angular v1.2+.

<div ng-class="['box', 
                aClass, 
               {true:'large': false: 'mini'}[isMaximized]]"></div>

It's also rather nice because the variable can use different types as a index without increasing complexity using ternaries. It can also remove any need for negations ;) Here is a fiddle link

score 2 · Answer 5 · answered Jun 02 '15 at 05:16

2

You can use simple expression given below

ng-class="{'active' : itemCount, 'activemenu' : showCart}"

answered Jun 02 '15 at 05:16

Vivek Panday

1,426
2
16
34

Complex angular js ng-class

5 Answers5

Linked