AngularJs：将ng-model绑定到单选按钮列表 [英] AngularJs: Binding ng-model to a list of radio buttons
问题描述
我试图将单选按钮列表中的选定值绑定到 ng-model
Im trying to bind the selected value in a list of radio buttons to an ng-model
I拥有：
<!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>
对于我的控制器：
(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;
});
}());
在第一部分中，我尝试重复所有 occurrence事件并将它们全部绑定到同一个模型。但是，每次选择 selectedOccurrence 值时都不会改变。
In the first section, I tried to ng-repeat all the occurrenceOptions and bind them all to the same model. However, each time I select something the selectedOccurrence value does not change.
请参阅plunkr： https://plnkr.co/edit/k1pMgkLdrMUG1blktQx1?p=preview
See plunkr: https://plnkr.co/edit/k1pMgkLdrMUG1blktQx1?p=preview
没有 ng-repeat ，只需输入所有单选按钮，我就可以使用它。为什么 ng-repeat 版本不起作用？
without the ng-repeat and just typing out all the radio buttons, I am able to get this to work. Why is the ng-repeat version not working?
推荐答案
原因它背后不起作用，你正在使用 ng-repeat &你在其中定义 ng-model 变量。 ng-repeat 的工作方式是，它在每次迭代的集合中创建一个新的子范围（原型继承）。因此，位于 ng-repeat 模板中的 ng-model 属于新创建的范围。这里 ng-model =selectedOccurrence在 ng-的每次迭代中创建。 selectedOccurrence 范围变量重复
The reason behind it is not working is, you are using ng-repeat & you are defining ng-model variable in it. The way ng-repeat works is, it create a new child scope(prototypically inherited) on each iteration of collection. So the ng-model which resides in ng-repeat template, belongs that newly created scope. Here ng-model="selectedOccurrence" create selectedOccurrence scope variable on each iteration of ng-repeat.
要解决此类问题，您需要在定义时遵循点规则 AngularJS中的模型
To overcome such a problem you need to follow dot rule while defining model in AngularJS
加价
<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>
代码
$scope.model = {}; //defined a model object
$scope.model.selectedOccurrence = 'current'; //and defined property in it
或者另一个首选方式是在声明控制器时使用 controllerAs 模式（使用此而不是 $ scope 内部控制器。）
OR Another preferred way would be using controllerAs pattern while declaring controller(use this instead of $scope inside controller).
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>
这篇关于AngularJs：将ng-model绑定到单选按钮列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
