在 AngularJS + Bootstrap 中添加数据切换属性时，单选按钮绑定不起作用
Posted
技术标签:
【中文标题】在 AngularJS + Bootstrap 中添加数据切换属性时，单选按钮绑定不起作用【英文标题】：Radio buttons binding is not working when a data-toggle attribute is added in AngularJS + Bootstrap 【发布时间】：2016-01-03 03:54:58 【问题描述】：我正在使用 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 模型绑定？
【问题讨论】：
你试过为每个输入元素设置唯一的ID吗？ @br3w5 - 是的，还是不行 Angular 和 Bootstrap 并不总是能很好地配合使用...angular-ui.github.io/bootstrap/#/buttons 提供了一个指令，用于使用 bootstrap 和 angular 实现单选按钮 还有这个***.com/questions/19150988/… ng-change,ng-click dont work with data-toggle="buttons" since v1.3.0的可能重复 【参考方案1】：我猜你不是唯一一个对这个问题生气的人。目前我面临同样的问题。
让我告诉你我的解决方法：
<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>
要理解的关键点是删除data-toggle="buttons"，它添加了导致错误的额外javascript逻辑。然后在同一输入中隐藏带有class="hide" 的复选框，然后根据您的支持模型对象的值“手动”设置活动状态。
希望这会有所帮助！
【讨论】：
刚刚发现这个问题在 Angular 6 中仍然存在 - 删除 data-toggle 修复了它 正如@ozz 所说，Angular 6 中仍然存在这个问题，我通过删除data-toggle="buttons" 并将[class.active]="option == 'value'" 添加到标签中解决了这个问题。但是我不需要将class="hide" 添加到任何<input>s【参考方案2】：
这是我在以前的项目中使用自定义指令处理范围的方法。以这种方式使用具有隔离范围的自定义指令是可选的。使用 ng-controller 它仍然可以为您工作 - 不同之处在于在控制器中设置单选按钮而不是 html，然后使用 ng-repeat 进行渲染。 (working Plnkr)
半径.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>
【讨论】：
【参考方案3】：明智的编码是正确的。好像您没有使用正确的Angulerjs 版本。你用的是哪个版本？ 试试 1.3
【讨论】：
我用 1.3.8 试过了，同样的代码对我来说效果很好。以上是关于在 AngularJS + Bootstrap 中添加数据切换属性时，单选按钮绑定不起作用的主要内容，如果未能解决你的问题，请参考以下文章
在 AngularJS + Bootstrap 中添加数据切换属性时，单选按钮绑定不起作用
使用 AngularJS 在 Bootstrap 选项卡中重新加载数据
新手问题，AngularJS，bootstrap modal 怎么获取数据