javascript Angular：单选按钮在点击每个按钮后停止触发“ng-change”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13443619/
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
Angular: radiobuttons stop firing "ng-change" after each one was clicked
提问by graph
I am building radio buttons dynamically. ng-change='newValue(value)stops being called after each radio button has been pressed once.
我正在动态构建单选按钮。ng-change='newValue(value)按下每个单选按钮一次后停止调用。
this works: Clicking on the radio buttons changes the value to foo/bar/baz. http://jsfiddle.net/ZPcSe/19/
这是有效的：单击单选按钮将值更改为 foo/bar/baz。 http://jsfiddle.net/ZPcSe/19/
<div ng-controller="MyCtrl">
<input type="radio" ng-model="value" value="foo" ng-change='newValue(value)'>
<input type="radio" ng-model="value" value="bar" ng-change='newValue(value)'>
<input type="radio" ng-model="value" value="baz" ng-change='newValue(value)'>
<hr>
{{value}}
</div>
this code does not: The {{value}} - "label" is not updated once each radio button has been pressed at least once. Aparently ng-change is not fired any more.
此代码不会：一旦每个单选按钮至少被按下一次，{{value}} - “标签”就不会更新。显然 ng-change 不再被触发。
<div ng-controller="MyCtrl">
<span ng-repeat="i in [0, 1, 2]">
<input name="asdf" type="radio" ng-model="value" value={{i}} ng-change='newValue(value)'>
</span>
{{value}}
</div>
The Controlles is the same each time:
控件每次都相同：
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.value = '-';
$scope.newValue = function(value) {
$scope.value = value;
}
}
Thanks for your help.
谢谢你的帮助。
回答by Michelle Tilley
ngRepeatcreates new scope, so trying to set valuesets it on the new scope. The workaround is to reference a property on an object that is on the parent scope--the object lookup happens on the parent scope, and then changing the property works as expected:
ngRepeat创建新范围，因此尝试将其设置value为新范围。解决方法是在父作用域上的对象上引用一个属性——对象查找发生在父作用域上，然后更改属性按预期工作：
HTML:
HTML：
<div ng-controller="MyCtrl">
<span ng-repeat="i in [0, 1, 2]">
<input name="asdf" ng-model="options.value" value="{{i}}" type="radio">
</span>
{{options.value}}
JS:
JS：
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.options = {
value: '-'
};
$scope.newValue = function(value) {
// $scope.options.value = value; // not needed, unless you want to do more work on a change
}
}?
You can check out a working fiddleof this workaround. See angular/angular.js#1100 on GitHubfor more information.
您可以查看此解决方法的工作小提琴。有关更多信息，请参阅GitHub 上的 angular/angular.js#1100。
回答by Avisek Chakraborty
Just a quick work-around, we can achieve the same- using ng-model="$parent.value", because it would refer to the parent of ng-repeatscopei.e- in myCtrlscope
只是一个快速的解决方法，我们可以实现相同的 using ng-model="$parent.value"，因为它会引用范围的父级，ng-repeat即在myCtrl范围内
Only Change in ng-model-
只有变化ng-model-
<input name="asdf" type="radio" ng-model="$parent.value" value={{i}} ng-change='newValue(value)'>
回答by Deep Shah
Try ng-clickinstead of ng-change.
尝试ng-click代替ng-change.
