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.

我正在使用AngularJS和Twitter Bootstrap，我想让两个单选按钮看起来像普通的Bootstrap按钮。我在jsFiddle上找到了这个例子，在将它应用到我的情况后，一切看起来都不错，但它无法正常工作。

I want to bind the radio buttons to a model in Angular. Here's my code:

我想将单选按钮绑定到Angular中的模型。这是我的代码：

<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:

这是点击“否”（收音机）按钮的结果：

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:

所以，模型根本没有约束力。当我从按钮组中删除data-toggle属性时，一切正常，但单选按钮在Bootstrap按钮的顶部可视化，如下图所示：

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?

我应该怎么做才能让第一张图片中的Bootstrap按钮看起来像这样，并且在第二张图片中正确使用AngularJS模型绑定？

3 个解决方案

#1

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)

以下是我在之前的项目中使用自定义指令处理范围的方法。以这种方式使用具有隔离范围的自定义指令是可选的。它应该仍然适用于使用ng-controller - 区别在于设置控制器中的单选按钮而不是html然后使用ng-repeat进行渲染。（工作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

index.html的主体

<body>
    <radius></radius>
</body>

#2

i guess you are not the only one that is mad about this issue.Currently i am having the same problem.

我猜你不是唯一一个对这个问题感到愤怒的人。目前我遇到了同样的问题。

Let me show 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 keypoint to understand , is to remove the data-toogle="buttons" wich adds aditional javascript logic that causes the error. And then hide the check box with the class="hide" in the same input and then set the active state "manually" according to the value of your backing model object.

要理解的关键点是删除数据toogle =“按钮”，它会添加导致错误的aditional javascript逻辑。然后在同一输入中隐藏带有class =“hide”的复选框，然后根据支持模型对象的值“手动”设置活动状态。

Hope this helps!.

希望这可以帮助！。

#3

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

编码明智其正确。好像你没有使用适当的Angulerjs版本。你使用哪个版本？试试1.3

#1