Geek Answers Handbook

Linking to radio curators does not work when a data switch attribute is added in AngularJS + Bootstrap

I use AngularJS with Twitter Bootstrap, and I want to make the two radio buttons look like regular Bootstrap buttons. I found this example on jsFiddle and after applying it to my case everything looks fine, but it does not work correctly.

I want to bind switches to a model in Angular. Here is my code:

<div class="btn-group btn-group-lg btn-group-justified" data-toggle="buttons"> <label class="btn btn-default"> <input type="radio" name="isMad" ng-model="isMad" ng-value="false" /> No </label> <label class="btn btn-default"> <input type="radio" name="isMad" ng-model="isMad" ng-value="true" /> Yes </label> </div> <h1> I am mad: {{ isMad }} </h1>

And here is the result of pressing the "No" button (radio):

enter image description here

So, the model is not connected at all. When I remove the drag and drop attribute from the button group, everything works correctly, but the radio buttons only appear on top of the Bootstrap buttons, as in this figure:

enter image description here

What should I do to have Bootstrap buttons similar to them in the first image and work correctly with the AngularJS model binding, as shown in the second?

+9
angularjs radio-button twitter-bootstrap binding buttongroup
source share
3 answers

I think you are not the only one who is crazy about this problem. I am currently facing the same problem.

Let me show you my workaround:

  <div class="btn-group"> <label class="btn btn-info" ng-class="{ active : model === 'value1' }"> <input type="radio" ng-model="model" value="value1" class="hide"> value 1 </label> <label class="btn btn-info" ng-class="{ active : model === 'value2' }"> <input type="radio" ng-model="model" value="value2" class="hide"> value 2 </label> </div>

The key thing to understand is to remove data-toggle="buttons" which adds extra JavaScript logic that causes an error. And then hide the checkbox with class="hide" in the same input, which then sets the active state to "manual" according to the value of your support model object.

Hope this helps!

+3
source share

Here's how I did it in a previous project with a custom directive to handle the area. Using a custom directive with a scope in this way is optional. It should still work for you using the ng controller - the difference is in setting the switches in the controller, not html, and then rendering using ng-repeat . ( working plnkr )

radius.html

 <div class="row"> <div class="col-sm-12 col-md-12"> <legend class="required">Choose a radius</legend> </div> <div class="col-sm-2 col-md-2"> <fieldset> <div class="form-group" ng-repeat="radius in vm.radiusValues"> <div class="check-radio"> <label for="{{ radius.id }}"> <input type='radio' name="radio" id="{{ radius.id }}" value="{{ radius.value }}" ng-model="vm.radius">{{ radius.name }} </label> </div> </div> </fieldset> <p>Selected value is {{ vm.radius }}</p> </div> </div>

radius.directive.js

 (function() { 'use strict'; angular .module('radius', []) .directive('radius', radius) .controller('RadiusCtrl', RadiusCtrl); function radius() { var directive = { bindToController: true, controller: 'RadiusCtrl', controllerAs: 'vm', replace: true, restrict: 'E', scope: {}, templateUrl: 'radius.html' }; return directive; } function RadiusCtrl() { var vm = this; vm.radius = 500; vm.radiusValues = [ {name: '100m', value: 100, id: 'groupidrad1'}, {name: '500m', value: 500, id: 'groupidrad2'}, {name: '1000m', value: 1000, id: 'groupidrad3'}, {name: '2000m', value: 2000, id: 'groupidrad4'} ]; } })();

Body index.html

 <body> <radius></radius> </body>
+1
source share

The coding is correct. It looks like you are not using the correct version of Angulerjs. which version are you using? try with 1.3

0
source share

More articles:


All Articles