AngularJS Bootstrap radio button group

Question

I am trying to set up a radio button group using the tutorial from here:

https://angular-ui.github.io/bootstrap/

So in my view I created this:

<div class="form-group">
    <div class="btn-group">
        <label class="btn btn-primary" ng-model="controller.selectedLines[0].forDelivery">For delivery</label>
        <label class="btn btn-primary" ng-model="!controller.selectedLines[0].forDelivery">For collection</label>
    </div>
</div>

My problem is I can't get the button to be selected. In their example, they had different booleans for each button, but mine has to share the boolean, so if the boolean value is true then the button "For delivery" should be active, if the value is false then the "For collection" should be active.

I tried doing it like this:

<div class="form-group">
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default" ng-class="active: controller.selectedLines[0].forDelivery === true">
            <input type="radio" name="optionsRadios" ng-model="controller.selectedLines[0].forDelivery" ng-value="true" ng-change="deliveryController.requestDeliveryDate(controller.order, controller.selectedLines)"> For delivery
        </label>
        <label class="btn btn-default" ng-class="active: controller.selectedLines[0].forDelivery === false">
            <input type="radio" name="optionsRadios" ng-model="controller.selectedLines[0].forDelivery" ng-value="false" ng-change="deliveryController.requestDeliveryDate(controller.order, controller.selectedLines)"> For collection
        </label>
    </div>
</div>

but that had the same issue. Does anyone know how I can get it to select the button based on my value?

Can you create plunker?

Hardik Gondalia
– Hardik Gondalia

2015-09-25 10:59:06 +00:00
Commented Sep 25, 2015 at 10:59 — Hardik Gondalia
– Hardik Gondalia, Commented Sep 25, 2015 at 10:59

Mosh Feu · Accepted Answer · 2016-08-02 07:21:37Z

14

Referring to the example given in https://angular-ui.github.io/bootstrap/

<div class="btn-group">
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</label>
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</label>
</div>

When radioModel='Left' the left button is selected.

As for your scenario, some options are missing. Here is the working code

<div class="btn-group">
    <label class="btn btn-primary" ng-model="mode" btn-radio="'Delivery'">For delivery</label>
    <label class="btn btn-primary" ng-model="mode" btn-radio="'Collection'">For collection</label>
</div>

Demo

edited Aug 2, 2016 at 7:21

Mosh Feu

29.5k18 gold badges94 silver badges141 bronze badges

answered Sep 25, 2015 at 11:13

Shamal Perera

1,6911 gold badge18 silver badges22 bronze badges

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

3 Comments

no id Over a year ago

Any chance to make this working with the newest ui-bootstrap-tpls?

Fakeer Over a year ago

The selected button id is deselected when clicking away from the control. Any simple way to retain the selection?

blalond Over a year ago

btn-radio should now be uib-btn-radio re: angular-ui.github.io/bootstrap/#!#%2Fbuttons

Collectives™ on Stack Overflow

AngularJS Bootstrap radio button group

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related