ng-model 的单选按钮双向绑定问题

Question

我在使用 ng-model 和 ng-value 进行单选按钮双向绑定时遇到问题。我有三个单选按钮，在 ng-repeat 中创建。它们都是相同的 ng-model，$scope.selectedItem，每个按钮的 ng-value 都是 ng-repeat 中的当前项。这似乎工作正常。当我想在控制器中设置所选项目时，问题就来了。这里我有一个 ng-click 事件 select() 将 selectedItem 设置为传入的项目。

function MyCtrl($scope) {
    $scope.list = [{
        id: 1
    }, {
        id: 2
    }, {
        id: 3
    }];
    $scope.select = function (item) {
        $scope.selectedItem = item;
    }
}

<div ng-repeat="item in list" class="interactive" ng-click="select(item)">
    <input type="radio" name="itemSelector" ng-model="selectedItem" ng-value="item" />     
  {{item.id}}
</div>

只要我只使用 ng-click 事件选择项目，它就可以工作。如果我直接使用单选按钮单击 #1，然后使用 ng-click 事件选择 #2，然后为 #1 触发 ng-click 事件，则第二个单选按钮将被取消选中，但第一个单选按钮不会被选中。当我在调试器中观察时，我可以看出 selectedItem 的值设置成功，只是单选按钮没有更新。

我使用单选按钮绑定的方式有问题吗？有没有办法解决这个问题？

JSFiddle：https://jsfiddle.net/SamGraber/vscvxg40/4/

Answer 1

绝对是一种奇怪的行为。我不确定是什么导致了您的问题，但请在此处查看解决方法 https://jsfiddle.net/vscvxg40/9/。

请注意，无论如何这是推荐的 HTML 做法 - 包装器 div 现在是 label，它会在单击时触发单选。

Answer 2

ng-repeat 创建一个子作用域，所以你只需要将 ng-model 绑定到$parent 作用域。完全不需要ng-click，因为 ng-model 已经为你做了双向绑定。在这里看小提琴http://jsfiddle.net/d1570gfk/1/

<div ng-repeat="item in list" class="interactive">
    <input type="radio" name="itemSelector" ng-model="$parent.selectedItem" ng-value="item" /{{item.id}}
</div>

Answer 3

这是一个解决您问题的小提琴 http://jsfiddle.net/paila/7ax5tspc/

问题在于 selectedItem 变量在控制器范围内的范围。

当使用 ng-repeat 生成单选按钮并更改 selectedItem 时，会在每个子作用域上创建一个新变量，并且永远不会修改控制器作用域上的 selectedItem。

使用对象来保存所选项目的值将解决此问题。当您这样做时，子作用域可以覆盖对象属性并将它们反射回父控制器作用域。

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

    function MyCtrl($scope) {
        $scope.list = [{
            id: 1
        }, {
            id: 2
        }, {
            id: 3
        }];
        $scope.selected = {};
        $scope.selected.Item = $scope.list[0];
    }