CODEWITHSUNDEEP
javascriptcssangularjstwitter-bootstrapangular-ui-bootstrap
kramer65
kramer65

Reputation: 54013

Conditional class doesn't work with Bootstrap and Angular?

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!

Upvotes: 2

Views: 1399

Answers (1)

Michel
Michel

Reputation: 28359

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

Upvotes: 6

Related Questions