绑定JSON对象在angularjs单选按钮 [英] Bind JSON object to radio button in angularjs

问题描述

所以我想单选按钮绑定的对象。我花了有一个小时试图弄清楚这件事，最后认输。下面是我的了：

 ＆LT;表＆gt;
        ＆LT; TR NG重复=theCustomer在顾客＆GT;
            ＆所述; TD＆GT;
                ＆LT;输入类型=电台NG-模式=currentCustomerVALUE =theCustomerID ={{theCustomer.id}}NG变化=currentCustomer = theCustomer＆GT;
                ＆LT;标签={{theCustomer.id}}＆GT; {{theCustomer.name}}＆LT; /标签＆gt;
            ＆LT; / TD＆GT;
        ＆LT; / TR＆GT;
＆LT; /表＆gt;
 

角的东西：

  bankApp.controller（BankController功能（$范围，CustomerRepository）
{
    $ scope.customers = [];
    $ scope.currentCustomer = {};    $ scope.createCustomer =功能（）{
        CustomerRepository.save（$ scope.customer，功能（客户）{
            $ scope.customers.push（客户）;
            $ scope.customer = {};
        }）;
    };
}）;
 

目前，当我尝试点击一个单选按钮没有任何反应，它甚至不标注得到遏制。我敢肯定有一定是一个非常简单的解决这个。最终的目标是让 currentCustomer 保存客户反映的无线电选择。

解决方案

 ＆LT;输入类型=电台NG-模式=$ parent.currentCustomerNAME =foo的NG - 值=theCustomerID ={{theCustomer.id}}＆GT; {{theCustomer.name}}＆LT; / TD＆GT;
 

这里的关键是 NG-值=theCustomer 。这就是角知道哪个对象被选中。html的值只知道字符串值，不能映射为对象。

如果您插入上述code，收音机会反映模型，即使是编程改变。此外，你不能忘记的 $父在NG-模型，因为 NG-重复创建一个新的作用域

So I am trying to bind radio buttons to objects. I have spent like an hour trying to figure this up and at last admit defeat. Here's what I got:

<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>

The angular stuff:

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 = {};
        });
    };
});

Currently, when I try and click on a radio button nothing happens, it doesn't even mark get checked. I'm sure there's got to be a really simple solution to this. The end goal is to have currentCustomer hold the customer reflected in the radio selection.

解决方案

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

The key here is the ng-value="theCustomer. This is how angular knows which object is selected. The html value only knows string values and cannot map to objects.

If you insert the above code, the radio will reflect the model, even if it is changed programatically. Also, you can't forget the $parent in the ng-model because the ng-repeat creates a new scope.

这篇关于绑定JSON对象在angularjs单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！