Question

这是我的代码：

<div ng-controller="TestController">
    <input ng-change="change()" ng-repeat="item in array" ng-model="selected" name="group" value="{{item.interval}}" type="radio">{{item.desc}}</input>
</div>
<script type="text/javascript">
    var app = angular.module('app', []);
    app.controller('TestController', function ($scope) {
        $scope.array = [ {
            interval: "1"
        }, {
            interval: "3"
        }, {
            interval: "24"
        }];

        $scope.selected = 1

        $scope.change = function () {
            console.log($scope.selected);
        }
    });
</script>

当我点击其他单选复选框时，$scope.selected值根本没有变化，仍为1。

但是当我将$scope.selected点更改为对象时：

    $scope.selected = {
        value: 1
    };

并将输入标记的模型绑定到value属性：ng-model="selected.value"。它再次工作。

为什么呢？为什么会这样？

Answer 1

范围问题

这是因为ng-repeat创建了自己的范围。所以selected现在是ng-repeat范围的新属性。如果你绝对需要，你可以这样做：

<div ng-controller="TestController"> //parent scope
   //ng-repeat create it's own scope here, so you must reference the $parent to get the selected value.
    <input ng-change="change()" ng-repeat="item in array" ng-model="$parent.selected" name="group" value="{{item.interval}}" type="radio">{{item.desc}}</input> // 
</div>

不如使用$parent，最好使用object.property，因为您已发现。

<强>替代

另外，另一种方法是向控制器添加更新方法。由于范围继承，您可以访问ng-repeat中的父方法并更新父范围selected属性：

//Add to your controller
$scope.updateSelected= function (selected) {
   $scope.selected = selected;
}

//new HTML
<div ng-controller="TestController">
        <input ng-change="updateSelected(selected)" ng-repeat="item in array" ng-model="selected" name="group" value="{{item.interval}}" type="radio">{{item.desc}}</input> // 
 </div>

Answer 2

在您创建的每个单选按钮的代码中separate scope，因此在选择其他单选按钮时无效。因此，您应该为每个单选按钮使用parent object，并将值设置为此parent object property，然后对每次更改都会产生影响。

像：在你的控制器中：

$scope.selectedInterval= {value: 1};

并在html中：

<input  ng-repeat="item in array" ng-model="selectedInterval.value" name="group" value="{{item.interval}}" type="radio">{{item.desc}}</input>

此处selectedInterval是父对象，value是selectedInterval的属性。这就是为什么不需要调用change函数。

AngularJS：无线电复选框模型没有改变

2 个答案:

范围问题

<强>替代