Javascript AngularJs：将 ng-model 绑定到单选按钮列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38020982/
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: Binding ng-model to a list of radio buttons
提问by Rhs
Im trying to bind the selected value in a list of radio buttons to an ng-model
我试图将单选按钮列表中的选定值绑定到 ng-model
I have:
我有：
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script src="./bower_components/angular/angular.min.js"></script>
<script src="test.js"></script>
</head>
<body ng-controller="testController">
<form>
<div ng-repeat="option in occurrenceOptions">
<input type="radio" name="occurrence" ng-value="option" ng-model="selectedOccurrence" /><label>{{ option }}</label>
</div>
</form>
<div>The selected value is : {{ selectedOccurrence }}</div>
<!-- This works -->
<input type="radio" ng-model="selected2" ng-value="'1'"> 1
<input type="radio" ng-model="selected2" ng-value="'2'"> 2
<input type="radio" ng-model="selected2" ng-value="'3'"> 3
<div>This selected value is : {{ selected2 }} </div>
</body>
</html>
For my controller:
对于我的控制器：
(function () {
var app = angular.module('testApp', []);
app.controller('testController', function($scope) {
$scope.occurrenceOptions = [];
$scope.occurrenceOptions.push('previous');
$scope.occurrenceOptions.push('current');
$scope.occurrenceOptions.push('next');
$scope.selected2;
});
}());
In the first section, I tried to ng-repeat all the occurrenceOptionsand bind them all to the same model. However, each time I select something the selectedOccurrencevalue does not change.
在第一部分中，我尝试对所有的进行 ng-repeatoccurrenceOptions并将它们全部绑定到同一个模型。但是，每次我选择某些东西时，该selectedOccurrence值都不会改变。
See plunkr: https://plnkr.co/edit/k1pMgkLdrMUG1blktQx1?p=preview
见 plunkr：https://plnkr.co/edit/k1pMgkLdrMUG1blktQx1 ?p =preview
without the ng-repeatand just typing out all the radio buttons, I am able to get this to work. Why is the ng-repeatversion not working?
没有ng-repeat并且只需输入所有单选按钮，我就可以让它工作。为什么ng-repeat版本不行？
回答by Pankaj Parkar
The reason behind it is not working is, you are using ng-repeat& you are defining ng-modelvariable in it. The way ng-repeatworks is, it create a new child scope(prototypically inherited) on each iteration of collection. So the ng-modelwhich resides in ng-repeattemplate, belongs that newly created scope. Here ng-model="selectedOccurrence"create selectedOccurrencescope variable on each iteration of ng-repeat.
它不起作用的原因是，您正在使用ng-repeat并在其中定义ng-model变量。ng-repeat工作方式是，它在每次迭代集合时创建一个新的子作用域（原型继承）。因此ng-model，驻留在ng-repeat模板中的 属于新创建的范围。这里在 的每次迭代上ng-model="selectedOccurrence"创建selectedOccurrence范围变量ng-repeat。
To overcome such a problem you need to follow dot rulewhile defining model in AngularJS
为了克服这样的问题，你需要dot rule在 AngularJS 中定义模型时遵循
Markup
标记
<body ng-controller="testController">
<form>
<div ng-repeat="option in occurrenceOptions track by $index">
<input type="radio" name="occurrences" ng-value="option" ng-model="model.selectedOccurrence" />
<label>{{ option }}</label>
</div>
</form>
<div>The selected value is : {{ model.selectedOccurrence }}</div>
</body>
Code
代码
$scope.model = {}; //defined a model object
$scope.model.selectedOccurrence = 'current'; //and defined property in it
OR Another preferred way would be using controllerAspattern while declaring controller(use thisinstead of $scopeinside controller).
或另一种首选方法是controllerAs在声明控制器时使用模式（使用this而不是$scope内部控制器）。
HTML
HTML
<body ng-controller="testController as vm">
<form>
<div ng-repeat="option in vm.occurrenceOptions">
<input type="radio" name="occurrence" ng-value="option" ng-model="vm.selectedOccurrence" /><label>{{ option }}</label>
</div>
</form>
</body>
