current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 3 down vote favorite
2

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.

share|improve this question

3 Answers 3

up vote 3 down vote

Apparently, getting a radio group to work inside an ng-repeat can be a bit tricky. The issue is with the ng-repeat creating its own child scope. One solution is to bind the model to the $parent. This thread gives an example.

I also created a working fiddle that more closely resembles your example.

In essence, I think your html is the only point that needs reworking:

    <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>
share|improve this answer
1  
So this works mostly, the only problem is currentCustomer is being set as stringified json rather than the object. Is there an easy fix for this? I tried doing it without the double braces and that didnt work. –  CodesLikeA_Mokey Apr 30 '13 at 14:32
    
What do you wish the final result to look like exactly? –  rGil May 1 '13 at 14:59
1  
I actually figured it out. The value attribute only takes a string and cant handle an object. I refactored to accommodate this. Thanks! –  CodesLikeA_Mokey May 1 '13 at 15:30
    
@CodesLikeA_Mokey Can you post the refactored code? How are you able to set the default selected radio button? jsfiddle.net/uNFWW/31 –  Tushar Jun 13 at 8:18
    
@Tushar see me answer below. –  CodesLikeA_Mokey Jun 16 at 20:06
up vote 1 down vote

It is because of the scope inheritance, you can read more about the problem here.

One of solution I uses in such a case is to bind the object to a object property instead of a primitive value like ng-model="form.currentCustomer".

Demo: Plunker

share|improve this answer
up vote 1 down vote accepted 
<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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.