Explore our sites

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

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

2 Answers

up vote 3 down vote accepted

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 at 14:32
 
What do you wish the final result to look like exactly? –  rGil May 1 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 at 15:30
add comment
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
add comment

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.