Steve Steve - 5 months ago 6
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
classifyForm
is dirty, it adds the class
tab-dirty
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
tab-dirty
and
tab-foobar
classes, if only one is true then only have that one class.

Answer

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':'')}}">
Comments