AngularJS：单选复选框模型没有改变

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

并将输入标签的模型绑定到值属性：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，正如您所发现的那样。

备选

此外，另一种方法是向您的控制器添加更新方法。由于 Scope Inheritance，您可以在 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，因此当 select 另一个 单选按钮 时没有影响。所以您应该为每个 单选按钮 使用 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：单选复选框模型没有改变

AngularJS: radio checkbox model doesn't change

javascript

radio

angularjs

范围问题

备选