twitter-bootstrap AngularJS：单选按钮不适用于 Bootstrap 3
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19150988/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS: Radio buttons do not work with Bootstrap 3
提问by daydreamer
I have a radio button, which sets the value of Trueor Falsebased on the value of transaction type
我有一个单选按钮，它设置True或False基于交易类型的值
The demo can be found here
该演示可以在这里找到
The problem is when I click on any of the radio button, the value of $scope.transaction.debitdoes not change
问题是当我单击任何单选按钮时，值$scope.transaction.debit不会改变
My javascript code is
我的 javascript 代码是
var app = angular.module('myApp', []);
app.controller("MainCtrl", function($scope){
$scope.transaction = {};
$scope.transaction.debit=undefined;
console.log('controller initialized');
});
Please let me know what I am doing wrong.
请让我知道我做错了什么。
Also, I do not want to use Angular-UIor AngularStrapfor this purpose, unless no other option is available.
此外，我不想使用Angular-UI或AngularStrap用于此目的，除非没有其他选项可用。
采纳答案by user2789093
You have a large label stuck over the top of the radio buttons which prevents input to your radio buttons. The html should read:
您在单选按钮顶部贴了一个大标签，以防止输入到您的单选按钮。html 应为：
<input type="radio" data-ng-model="transaction.debit" value="True">Debit</input>
<input type="radio" data-ng-model="transaction.debit" value="False">Credit</input>
It then works, of course it may not look the way you want it to then.
然后它就可以工作了，当然它可能看起来不像你想要的那样。
回答by F?rat Kü?üK
I modified dpineda's solution. You can use without removing bootsrap.js dependency. Also there is a working example here.
我修改了dpineda 的解决方案。您可以在不删除 bootsrap.js 依赖项的情况下使用。也有一个工作示例这里。
This is the flow:
这是流程：
- Remove
data-toggle="buttons"for preventing bootstrap execution. - Add some CSS for fixing the broken view (btn-radio css class)
- Add some AngularJS logic for checked style effect.
- 删除
data-toggle="buttons"以防止引导程序执行。 - 添加一些 CSS 来修复损坏的视图（btn-radio css 类）
- 为检查样式效果添加一些 AngularJS 逻辑。
html
html
<div class="btn-group col-lg-3">
<label class="btn btn-default btn-radio" ng-class="{'active': transaction.debit == '0'}">
<input type="radio" data-ng-model="transaction.debit" value="0"> Debit
</label>
<label class="btn btn-default btn-radio" ng-class="{'active': transaction.debit == '1'}">
<input type="radio" data-ng-model="transaction.debit" value="1"> Credit
</label>
</div>
<p>Transaction type: {{transaction.debit}}</p>
JavaScript
JavaScript
var app = angular.module('myApp', []);
app.controller("MainCtrl", function($scope) {
$scope.transaction = {
debit: 0
};
});
Style
风格
.btn-radio > input[type=radio] {
position : absolute;
clip : rect(0, 0, 0, 0);
pointer-events : none;
}
回答by Lalit
I found the problem in bootstrap.js. Comment the line e.preventDefault(), it works.
我在bootstrap.js. 注释该行e.preventDefault()，它有效。
// BUTTON DATA-API
// ===============
$(document)
.on('click.bs.button.data-api', '[data-toggle^="button"]', function (e) {
var $btn = $(e.target)
if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
Plugin.call($btn, 'toggle')
e.preventDefault() //Before
//e.preventDefault() //After
})
.on('focus.bs.button.data-api blur.bs.button.data-api', '[data-toggle^="button"]', function (e) {
$(e.target).closest('.btn').toggleClass('focus', /^focus(in)?$/.test(e.type))
})
回答by dpineda
if you remove de bootstrap code you can control the styles with conditionals
如果删除引导代码，则可以使用条件控制样式
<label class="btn btn-default" ng-class="{'active': transaction.debit == 'some'}">
<input type="radio" data-ng-model="transaction.debit" name="debit" value="some"> Some
</label>
<label class="btn btn-default" ng-class="{'active': transaction.debit == 'other'}">
<input type="radio" data-ng-model="transaction.debit" name="debit" value="other"> Other
</label>
回答by Shlomi Loubaton
Based on francisco.preller's answer I wrote two solutions trying to make it fit for generic use, without loosing the input tags: html:
基于 francisco.preller 的回答，我编写了两个解决方案，试图使其适合通用使用，同时又不丢失输入标签：html：
<label class="btn btn-info" radiobuttonlbl>
<input ng-model="query.gender" type="radio" value="0">male
</label>
solution #1:
解决方案#1：
.directive("radiobuttonlbl", function() {
return {
restrict: 'A',
link: function(scope, element, attrs, ctrl) {
element.bind('click', function () {
var input_elem = angular.element(element.find('input')[0]);
(function(o, s, v) {
s = s.replace(/\[(\w+)\]/g, '.');
s = s.replace(/^\./, '');
var a = s.split('.').reverse();
while(a.length>1) {
var k = a.pop();
o = o[k];
}
scope.$apply(function(){ o[a.pop()]=v;});
})(scope, input_elem.attr('ng-model'), input_elem.attr('value'));
});
}
};
})
Solution #2:
解决方案#2：
.directive("radiobuttonlbl", function() {
return {
restrict: 'A',
link: function(scope, element, attrs, ctrl) {
element.bind('click', function () {
var input_elem = angular.element(element.find('input')[0]);
input_elem.prop('checked',true);
input_elem.triggerHandler('click');
});
}
};
})
I have a feeling the first one is better because it make angular do the updating work.
我有一种感觉，第一个更好，因为它使 angular 进行更新工作。
回答by francisco.preller
Here's a working version using a new directive:
这是使用新指令的工作版本：
html
html
<section ng-controller="MainCtrl">
<div class="form-group">
<label class="col-lg-2 control-label">Type</label>
<div class="btn-group col-lg-3" data-toggle="buttons">
<label class="btn btn-default" radio-button ng-model="transaction.debit" value="True">
Debit
</label>
<label class="btn btn-default" radio-button ng-model="transaction.debit" value="False">
Credit
</label>
</div>
<p>Transaction type: {{transaction.debit}}</p>
</div>
</section>
javascript
javascript
// Code goes here
var app = angular.module('myApp', []);
app.controller("MainCtrl", function($scope){
$scope.transaction = {};
$scope.transaction.debit=undefined;
console.log('controller initialized');
});
app.directive("radioButton", function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
element.bind('click', function () {
if (!element.hasClass('active')) {
scope.$apply(function () {
scope.transaction.debit = attrs.value;
});
}
});
}
};
})
回答by cowboy_programmer
If someone is still searching for an easy way to do this (I personally am hesitant to overload my code with directives), here is what I did:
如果有人仍在寻找一种简单的方法来做到这一点（我个人对用指令超载我的代码犹豫不决），这就是我所做的：
You can set the value using ng-clickon the label. Furthermore, notice the ng-initand activeclass on the label of the first radio item. This way, you can let bootstrap do its thing, and angular do its thing. The only drawback is you are not letting angular control this using ng-model.
您可以ng-click在标签上使用设置值。此外，请注意第一个单选项标签上的ng-init和active类。这样，你可以让 bootstrap 做它的事情，而 angular 做它的事情。唯一的缺点是你没有让角度控制使用 ng-model。
<div class="btn-group col-lg-3" data-toggle="buttons">
<label class="btn btn-default active" ng-init="transaction.debit=true" ng-click="transaction.debit=true">
<input type="radio" checked> Debit
</label>
<label class="btn btn-default" ng-click="transaction.debit=false">
<input type="radio"> Credit
</label>
</div>
回答by Aosi
I have the same problem, in my case, the default style change and can't use angular ng-model inside any radio or checkbox button. So i read some articles and found that sometimes if you load JQuery after Bootstrap it overwrites any other instance of jQuery, and it prevent default styles and components to be loaded as bootstrap components, this also happens if you load angularJS after jQuery or viceversa.
我有同样的问题，就我而言，默认样式发生了变化，并且无法在任何单选按钮或复选框按钮中使用 angular ng-model。因此，我阅读了一些文章，发现有时如果您在 Bootstrap 之后加载 JQuery，它会覆盖任何其他 jQuery 实例，并且它会阻止默认样式和组件作为引导组件加载，如果您在 jQuery 之后加载 angularJS，也会发生这种情况，反之亦然。
PS.- My answer: Check your load script stack, play with it and find which order works for you. (first jquery, then angularJs, finally bootstrap). Usually you require to jQuery to be the first option, Angular and almost every new framework works on top of it. Cheers.
PS.- 我的回答：检查您的加载脚本堆栈，使用它并找到适合您的顺序。（首先是 jquery，然后是 angularJs，最后是引导程序）。通常你需要 jQuery 作为第一选择，Angular 和几乎所有的新框架都在它之上工作。干杯。
回答by osm0sis
I had the same problem. Use ng-click on your labels and it will work fine with bootstrap
我有同样的问题。在标签上使用 ng-click，它可以与引导程序一起正常工作
<label class="btn btn-default" ng-click="transaction.debit = 'debit'">
