Search code examples
javascriptangularjsangular-ui-bootstrapng-class

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.

Solution

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