javascript - Angular：单选按钮在单击每个单选按钮后停止触发“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}} - “标签”就不会更新。Aparently 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>

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 。

Answer 2

只是一个快速的解决方法，我们可以实现相同的使用ng-model="$parent.value"，因为它会引用范围的父级，ng-repeat即范围myCtrl内

只改变ng-model——

<input name="asdf" type="radio" ng-model="$parent.value" value={{i}} ng-change='newValue(value)'>

这是小提琴

Answer 3

尝试ng-click代替ng-change.