Angular:单击每个单击后,radiobuttons停止触发"ng-change"

Question

我正在动态构建单选按钮.ng-change='newValue(value)按下每个单选按钮一次后停止被调用.

这样做:单击单选按钮会将值更改为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>

此代码不会:一旦按下每个单选按钮一次,{{value}} - "label"就不会更新.几乎不会再发生变革了.

<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>

http://jsfiddle.net/ZPcSe/18/

每次控制都是一样的:

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.value = '-';
    $scope.newValue = function(value) {
    $scope.value = value;
    }
}

谢谢你的帮助.

Answer 1

ngRepeat 创建新范围,因此尝试设置value将其设置在新范围上.解决方法是引用父作用域上的对象的属性 - 对象查找在父作用域上发生,然后更改属性按预期工作:

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:

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
    }
}?

你可以查看这个变通方法的工作小提琴.有关更多信息,请参阅GitHub上的angular/angular.js#1100.