CODEWITHSUNDEEP
javascriptangularjsangular-ui-bootstrapng-class
Steve
Steve

Reputation: 14912

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.

Upvotes: 1

Views: 44

Answers (2)

Bryan Euton
Bryan Euton

Reputation: 929

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

Upvotes: 1

DerekMT12
DerekMT12

Reputation: 1349

Update: ng-class won't work on the angular ui tab directive like the OP mentions. Here is the link to one of logged bugs: https://github.com/angular-ui/bootstrap/issues/1741

They don't offer any good solutions to get around it. So the only way I see is making a function in the controller to handle the logic to apply the class(es).

For all other cases (where possible), you should use ng-class

<tab heading="My Tab" ng-class="{ 'tab-dirty': classifyForm.$dirty, 'your-other-class': someOtherProperty }">

Upvotes: 1

Related Questions