AngularJS - Binding radio button selection to model inside ng-repeat

Question

I have a data model persons which takes the following form:

personsInfo = {

              name: Adam
              dob: 31-FEB-1985
              docs: [  
              {
               docType: Drivers License,
               number: 121212,
               selected: false
               id: 1
              },
              { 
               selected: true,
               docType: None
              },
              { 
               docType: State ID,
               number: 132345,
               selected: false,
               id: 2
              }
             ]
            }

In my markup I have defined the following to dynamically generate radio buttons.

<div ng-repeat="personDoc in personsInfo.docs">
  <input type="radio" name="personDocs" ng-model="personDoc.selected" value=""/>    

  {{personDoc.docType}} <span ng-hide="personDoc.docType === 'None'">Number: {{personDoc.number}}</span>
</div>

I want to be able to check the documents which have selected as true on page load, and then depending on what the user selects save the selected flag in my personsInfo model.

My intent here is to send the personsInfo model back to another page.

If somebody could point me to a working fiddle it would be greatly appreciated!

Thanks!

It's still a little unclear what part of this you're having trouble doing. Is the model not being updated like you expect? Are you having trouble differentiating the changed documents? Is it the request back to the server you're confused about? This post needs some clarification. — Patrick
– Patrick, Commented Apr 28, 2014 at 20:58
Hi Patrick, Thanks for the reply. I guess I'm confused about all the parts. Maybe the data model needs to be changed, how does data binding work with radio buttons and saving the user selections into the original model. — bazzinga
– bazzinga, Commented Apr 28, 2014 at 21:07
If you haven't already worked through the Angular tutorial, I highly recommend it as it covers some of these issues, but first it looks like your radio button is really just expressing a boolean value, so for simplicity I would convert it to a checkbox. Then the model will automatically be updated with the correct true/false value. — Patrick
– Patrick, Commented Apr 28, 2014 at 21:22
I did go over the tutorial and I have developed a pretty complex app but I was having trouble with radio button binding. I don't need a checkbox because the user can only select only one of the documents. Would you have any recommendations on changing the data model so I can bind easily to a radio button? — bazzinga
– bazzinga, Commented Apr 28, 2014 at 21:29
Oh, oh, I see what you're trying to do now. Yes, I do; I'll post an answer. — Patrick
– Patrick, Commented Apr 28, 2014 at 21:31

Patrick · Accepted Answer · 2014-04-29 15:54:55Z

2

You're almost there just missing the binding to show which document is selected. We'll add an object to the scope to represent the selected item, then bind the forms to that model.

JS

app.controller('...', function($scope) {
    $scope.personInfo = { ... };
    $scope.selectedDoc = {};

    $scope.$watch('personInfo',function() {
        $scope.selectedDoc = $scope.personInfo.docs[0];
    });
});

HTML

<div ng-repeat='doc in personInfo.docs'>
    <input type='radio' ng-model='selectedDoc' value='doc' /> {{doc.docType}}
</div>

<form>
    <input type='text' ng-model='selectedDoc.number' />
    ...
</form>

edited Apr 29, 2014 at 15:54

answered Apr 28, 2014 at 21:37

Patrick

8617 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

bazzinga Over a year ago

Thanks Patrick. Do you know how can I select the document which has the selected flag as true during initialization? Currently, the selectedDoc is empty so it doesn't pre-select any of the documents.

bazzinga Over a year ago

In this case, it will always check the first document. I need a way to check the doc with selected attribute as true.

Patrick Over a year ago

At this point it's just another JS object. You can loop through your docs and find the one that's selected. If you're using underscore, $scope.selectedDoc = _.where($scope.personInfo.docs,{selected:true});

bazzinga Over a year ago

Patrick - Thanks for your help. I'm sorry I didn't make it clear in the beginning that I'm getting the personInfo object from an asynchronous AJAX call and the controller doesn't know when the personInfo object is available. So I guess I would need to initialize the selectedDoc object on the server side and then bind it to the model. The personInfo object is retrieved in a parent controller and the child controller renders the personInfo once it's retrieved.

bazzinga Over a year ago

That's wonderful. I ended up using a combination of ng-checked and ng-click on radio button to achieve the same functionality. I'm calling a method on the scope when a user clicks on the radio button to change the selected flag to true and false for other docs. ng-checked is setting the radio button to checked if selected is true. Thanks for your awesome suggestions! I wish I could upvote your answer but I haven't gained enough reputation on SO..:(

|

Collectives™ on Stack Overflow

AngularJS - Binding radio button selection to model inside ng-repeat

1 Answer 1

JS

HTML

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

JS

HTML

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related