Question

所以我试图将单选按钮绑定到对象。我花了一个小时试图解决这个问题，最后承认失败。这就是我得到的：

<table>
        <tr ng-repeat="theCustomer in customers">
            <td>
                <input type="radio" ng-model="currentCustomer" value="theCustomer" id="{{theCustomer.id}}" ng-change="currentCustomer = theCustomer">
                <label for="{{theCustomer.id}}">{{theCustomer.name}}</label>
            </td>
        </tr>
</table>

角色的东西：

bankApp.controller("BankController", function ($scope, CustomerRepository)
{
    $scope.customers = [];
    $scope.currentCustomer = {};

    $scope.createCustomer = function () {
        CustomerRepository.save($scope.customer, function (customer) {
            $scope.customers.push(customer);
            $scope.customer = {};
        });
    };
});

目前，当我尝试单击单选按钮时没有任何反应，它甚至没有标记得到检查。我确信必须有一个非常简单的解决方案。最终目标是让currentCustomer让客户反映在电台选择中。

Answer 1

<input type="radio" ng-model="$parent.currentCustomer" name="foo" ng-value="theCustomer" id="{{theCustomer.id}}">{{theCustomer.name}}</td>

这里的关键是ng-value="theCustomer。这就是角度知道选择哪个对象的方式。 html value只知道字符串值，无法映射到对象。

如果插入上述代码，则无线电将反映模型，即使它以编程方式更改。此外，您无法忘记ng-model中的$parent，因为ng-repeat会创建新范围。

Answer 2

显然，让一个无线电小组在ng-repeat中工作可能有点棘手。问题在于ng-repeat创建了自己的子范围。一种解决方案是将模型绑定到$ parent。 This thread举了一个例子。

我还创建了一个更像你的例子的working fiddle。

从本质上讲，我认为你的html是唯一需要重做的点：

    <table>
        <tr ng-repeat="theCustomer in customers">
            <td><input type="radio" ng-model="$parent.currentCustomer" name="foo" value="{{theCustomer}}" id="{{theCustomer.id}}">{{theCustomer.name}}</td>
        </tr>
    </table>

Answer 3

由于范围继承，您可以阅读有关问题here的更多信息。

我在这种情况下使用的解决方案之一是将对象绑定到对象属性而不是像ng-model="form.currentCustomer"这样的原始值。

演示：Plunker

将JSON对象绑定到angularjs中的单选按钮

3 个答案: