我正在使用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)
原文链接：/angularjs/141912.htmlradius.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>
