Twitter Bootstrap Question posted in

Twitter bootstrap – Radio buttons binding is not working when a data-toggle attribute is added in AngularJS + Bootstrap

I am using AngularJS along with Twitter Bootstrap and I want to make two radio buttons look like normal Bootstrap buttons. I found this example on jsFiddle and after applying it to my case everything looks fine but it’s not working correctly.

I want to bind the radio buttons to a model in Angular. Here’s 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’s the result of clicking on the “No” (radio) button:

enter image description here

So, the model is not bound at all. When I remove the data-toggle attribute from the button group, everything works correctly but the radio buttons are visualized just on top of the Bootstrap buttons like in this picture:

enter image description here

What should I do in order to have Bootstrap buttons looking like these in the first picture and working correctly with AngularJS model binding like these in the second one?

Tags:

3

Answers


  1. 0

    Coding wise its correct. seems like you have not use proper Angulerjs version. which version u r using ?
    try with 1.3

    Login or Signup to reply.
  2. 0

    Here’s how I’ve done it on a previous project with a custom directive for handling scope. Using a custom directive with an isolate scope in this way is optional. It should still work for you using ng-controller – the difference is setting up the radio buttons in the controller not the html 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'}
        ];
    }
})();

    The body of index.html

    <body>
    <radius></radius>
</body>
    Login or Signup to reply.
  3. 0

    i guess you are not the only one that is mad about this issue. Currently I am 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-point to understand is to remove the data-toggle="buttons" which adds additional JavaScript logic that causes the error. And then hide the check-box with the class="hide" in the same input which then sets the active state “manually” according to the value of your backing model object.

    Hope this helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search