在AngularJS Bootstrap中添加数据切换属性时,单选按钮绑定不起作用

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

我想将单选按钮绑定到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>

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

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

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

以下是我在之前的项目中使用自定义指令处理范围的方法.以这种方式使用具有隔离范围的自定义指令是可选的.它应该仍然适用于使用ng-controller – 区别在于设置控制器中的单选按钮而不是html然后使用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'}
        ];
    }
})();

index.html的主体

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

在AngularJS Bootstrap中添加数据切换属性时,单选按钮绑定不起作用

相关文章