Conditional class doesn't work with Bootstrap and Angular?

Question

Using Bootstrap, Angular and ui-bootstrap I'm creating a bunch of radio buttons which look like normal buttons (working plunker here).

I now want to make the active button blue (.btn-primary) and the rest white (btn-default). I found some SO-answers which explain how to conditionally apply a class here. I tried implementing this technique like so (Plunker here):

<div class="btn-group">
    <label class="btn" ng-class="{btn-primary: radioModel=='Left', btn-default: radioModel!='Left'}" ng-model="radioModel" btn-radio="'Left'">Left</label>
    <label class="btn" ng-class="{btn-primary: radioModel=='Middle', btn-default: radioModel!='Middle'}"ng-model="radioModel" btn-radio="'Middle'">Middle</label>
    <label class="btn" ng-class="{btn-primary: radioModel=='Right', btn-default: radioModel!='Right'}"ng-model="radioModel" btn-radio="'Right'">Right</label>
</div>

Unfortunately it doesn't seem to work. Does anybody know how I can achieve the active button to be a btn-primary and the other ones being a btn-default? All tips are welcome!

Michel · Accepted Answer · 2015-09-28 12:23:40Z

6

You are missing quotes around css classes btn-primary and btn-default. You need quotes because there is a dash in the property of the object.

See edited plunker

answered Sep 28, 2015 at 12:23

Michel

28.6k6 gold badges67 silver badges72 bronze badges

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

2 Comments

kramer65 Over a year ago

One last question; is there a way that I can set the btn-primary class if the button is selected? That would save me to retype the model value twice in every button..

Michel Over a year ago

You could define all buttons as btn btn-default and add the class btn-primary when needed using ng-class (see plunker). But actually, if you add css styles for the .btn.active, you could get rid of the ng-class directive: indeed, you want to style the active button and so far you do that by changing his type from default to primary (see yet another plunker)

Collectives™ on Stack Overflow

Conditional class doesn't work with Bootstrap and Angular?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related