twitter-bootstrap 如何使复选框的行为类似于 ng-repeat 中的单选按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26461390/
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
How to make checkboxes behave like radio buttons in ng-repeat?
提问by Abhishek
I have faced problem to use Checkbox behave like radio button in ng-repeat. Where select and unselect the box and one time only one box will be selected. It is working Without Ng-repeat.But i want to use this in ng-repeat.
我遇到了在 ng-repeat 中使用 Checkbox 行为类似于单选按钮的问题。其中选择和取消选择框，一次只会选择一个框。它在没有 Ng-repeat 的情况下工作。但我想在ng-repeat 中使用它。
Here is my HTML File :
这是我的 HTML 文件：
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="[email protected]" src="http://code.angularjs.org/1.1.5/angular.min.js" data-semver="1.1.5"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1> WithOut ng-repeat </h1>
<input type="checkbox" ng-checked="model1=='11'" ng-click="model1='11'"> a
<br/>
<input type="checkbox" ng-checked="model1=='12'" ng-click="model1='12'"> b
<br/>
<input type="checkbox" ng-checked="model1=='13'" ng-click="model1='13'"> c
<br>
Model = {{model1}}
<h1> With ng-repeat </h1>
<div data-ng-repeat="p in pp.rate">
<input type="checkbox" ng-checked="model=='{{p.price}}'"
ng-click="model='{{p.price}}'">
Model = {{model}}
</div>
</body>
</html>
Here is My Controller :
这是我的控制器：
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.pp = {
rate: [ {price: '11'},
{price: '12'},
{price: '13'}
]
};
});
Here is My Plunker Linkhttp://plnkr.co/edit/BUHPNjTGaIsG33hsSWeC?p=preview
这是我的 Plunker 链接http://plnkr.co/edit/BUHPNjTGaIsG33hsSWeC?p=preview
Please Give Me a solutionthanks in advance.
请给我一个解决方案，提前谢谢。
回答by Fernando Gm
I had the same problem today and I finally found a nice solution:
我今天遇到了同样的问题，我终于找到了一个很好的解决方案：
<div data-ng-repeat="p in pp.rate">
<input type="checkbox" ng-model="result.price" ng-true-value="{{p.price}}" ng-false-value="" >
{{p.plan}}
</div>
plunkr demo http://plnkr.co/edit/qLlFBhnUdzTnAu1U71uk?p=preview
plunkr 演示http://plnkr.co/edit/qLlFBhnUdzTnAu1U71uk?p=preview
I hope it helps you, or it helps others in the future
我希望它可以帮助你，或者它可以帮助其他人在未来
Have fun!
玩得开心！
回答by Chandermani
The issue is with ng-repeat creating a new scope and you not using dotnotation to reference your model.
问题在于 ng-repeat 创建了一个新的范围，而您没有使用dot符号来引用您的模型。
See the updated plunkr here http://plnkr.co/edit/EQdv60ppdVm5Nkp2o8p8?p=preview
在此处查看更新的 plunkr http://plnkr.co/edit/EQdv60ppdVm5Nkp2o8p8?p=preview
I added a object selectionthat tracks selection instead of a modelstring value. The checkbox is then checked against selection.modelinstead of model
我添加了一个selection跟踪选择而不是model字符串值的对象。然后检查复选框selection.model而不是model
Highly recommend you read https://github.com/angular/angular.js/wiki/Understanding-Scopesto understand prototypal inheritance and the effect on scope.
强烈建议您阅读https://github.com/angular/angular.js/wiki/Understanding-Scopes以了解原型继承及其对作用域的影响。
