AngularJS Bootstrap Switch Group

Question

I am trying to set up a switch group using a tutorial here:

https://angular-ui.imtqy.com/bootstrap/

So, in my opinion, 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 that I cannot select a button. In their example, for each button they had different Booleans, but I need to share the logical one, therefore, if the logical value is true , then the "For delivery" button should be active, if false , then the "For assembly" command is active.

I tried to do 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 with the same problem. Does anyone know how I can get him to choose a button based on my value?

Answer 1

Referring to the example given in https://angular-ui.imtqy.com/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