Steve Steve - 4 months ago 5x
AngularJS Question

Angular JS: bind class to two different expressions?

I have an angular bootstrap tabset.

NOTE: this is a ui-bootstrap directive. So ng-class does not work.

To be able to change the class conditionally, I found here on SO:

<tab heading="My Tab" class="{{classifyForm.$dirty ? 'tab-dirty':''}}">

Works great, when the form
is dirty, it adds the class
and otherwise removes it.

Except now I need to do the same thing with another condition and another class in addition to what I have.

What is the way to combine the two expressions, so I get essentially:

if form is dirty,tab-dirty
(what I have now) and
if foobar then tab-foobar

so, if the form is dirty and foobar is true, the resulting tab should have both
classes, if only one is true then only have that one class.


It is very annoying that you can't use ng-class on this but you can do the following

<tab heading="My Tab" class="{{ (classifyForm.$dirty ? 'tab-dirty':'') + (classifyForm.foobar ? 'tab-foobar':'')}}">