Complex angular js ng-class

angularjs ng-class
Szymon Wygnański picture Szymon Wygnański · Nov 28, 2012 · Viewed 52.9k times · Source

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)?

Answer

Andre Goncalves picture Andre Goncalves · Nov 28, 2012

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)

Related questions

AngularJS ng-class if-else expression

With AngularJS I'm using ng-class the following way: <div class="bigIcon" data-ng-click="PickUp()" ng-class="{first:'classA', second:'classB', third:'classC', fourth:'classC'}[call.State]"/> I'm wondering if I can use the if-else expression to do something similar to …

Read More
Adding multiple class using ng-class

Can we have multiple expression to add multiple ng-class ? for eg. <div ng-class="{class1: expressionData1, class2: expressionData2}"></div> If yes can anyone put up the example to do so. .

Read More
adding and removing classes in angularJs using ng-click

I am trying to work how to add a class with ngClick. I have uploaded up my code onto plunker Click here. Looking at the angular documentation i can't figure out the exact way it should be done. Below is …

Read More