14

所以我试图将单选按钮绑定到对象。我花了大约一个小时试图弄清楚这一点，最后承认失败。这是我得到的：

<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客户反映在无线电选择中。

4

3 回答 3

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

这里的关键是ng-value="theCustomer. 这就是 angular 如何知道选择了哪个对象。htmlvalue只知道字符串值，不能映射到对象。

如果您插入上面的代码，收音机将反映模型，即使它以编程方式更改。此外，您不能忘记$parentng-model 中的 ，因为它ng-repeat创建了一个新范围。

于 2014-06-16T20:05:52.097 回答
5

显然，让广播组在 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>
于 2013-04-30T00:34:49.827 回答
3

这是因为范围继承，您可以在此处阅读有关该问题的更多信息。

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

演示：Plunker

于 2013-04-30T03:30:50.767 回答