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

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只知道字符串值,不能映射到对象.

如果插入上述代码,则无线电将反映模型,即使它以编程方式更改.此外,您不能忘记$parent在ng模型中,因为它ng-repeat创建了一个新的范围.

Answer 2

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

我还创建了一个工作提琴，它与您的示例更加相似。

本质上，我认为您的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>