Angular JS: bind class to two different expressions?

Question

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.

I would create a method in the controller to generate the classes string, perhaps with arguments :) — Nikos Paraskevopoulos
– Nikos Paraskevopoulos, Commented Jun 9, 2016 at 18:43

Steve · Accepted Answer · 2016-06-10 16:21:50Z

1

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

edited Jun 10, 2016 at 16:21

Steve

15k39 gold badges141 silver badges247 bronze badges

answered Jun 9, 2016 at 18:59

Bryan Euton

9395 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Steve Over a year ago

I wasn't sure how to structure something like that. Thanks.

Bryan Euton Over a year ago

It works. I use the same kind of thing in my application.

Steve Over a year ago

I had to make n edit to ensure the added classes all have a space between them. Otherwise, in the above case you'd have gotten class="tab-dirtyfoobar"

DerekMT12 · Accepted Answer · 2016-06-09 19:13:23Z

1

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 }">

edited Jun 9, 2016 at 19:13

answered Jun 9, 2016 at 18:34

DerekMT12

1,35911 silver badges15 bronze badges

3 Comments

Steve Over a year ago

I cannot use ng-class, this is a directive fro ui-bootstrap. If I could use ng-class, it would be as easy as you suggest.

DerekMT12 Over a year ago

Can you make a plunker for it? That's strange why ng-class wouldn't work.

Steve Over a year ago

"Tab" is a directive and the directive actually writes out its own bootstrap html code and transcludes its contents. Whoever created it did not allow for ng-class to be added. This is an older version of the directive, 0.13.1. Perhaps the current one is smarter, but this project is stuck in the old one.

Collectives™ on Stack Overflow

Angular JS: bind class to two different expressions?

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related