2

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!

Community
  • 1
  • 1
kramer65
  • 50,427
  • 120
  • 308
  • 488

1 Answers1

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

Michel
  • 26,600
  • 6
  • 64
  • 69
  • 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.. – kramer65 Sep 28 '15 at 13:03
  • You could define all buttons as `btn btn-default` and add the class `btn-primary` when needed using `ng-class` (see [plunker](http://plnkr.co/edit/HZs6qa1eZqTsuxD8coiF?p=preview)). 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](http://plnkr.co/edit/Xy1MK6SFUpa49lHe8LJP?p=preview)) – Michel Sep 28 '15 at 14:40