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：http://jsfiddle.net/SamGraber/vscvxg40/4/

Answer 1

这是解决问题的小提琴 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];
    }

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/vscvxg40/9/。

请注意，这是推荐的HTML练习 - 包装器div现在是label，在单击时会触发无线电选择。

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

3 个答案: