Radio buttons in nested ng-repeat

Question

I am new to angular and I was stuck on an issue where I have a nested ng-repeat inside an ng-repeat as follows:

<div ng-repeat="question in main.questions">
                <div class="row">
                        <br/><span>Q{{$index+1}}. {{question.Ques.questiontxt}}</span>
                </div>
                <div ng-repeat="answer in question.Answer">
                        <input type="radio" name="question{{$parent.$index}}" value="{{answer.answertxt}}{{$parent.$index}}"/>         {{answer.answertxt}}
                </div>
</div>

Here, main.questions is an array of questions. For each question there are multiple options which are iterated through the second ng-repeat block. However, when I try to use ng-model for the radio button input as follows:

<input type="radio" name="question{{$parent.$index}}" value="{{answer.answertxt}}{{$parent.$index}}" ng-model="main.formData"/> {{answer.answertxt}}

, I am only able to select one option for all the questions combined (ideally should be able to select 1 option for each question.). And when I don't use ng-model, then I am able select one option for each question (as should be) but unable to capture the value of the selected input.

Can you please guide me on what can be the issue here? Is there a better way of achieving what I am trying to do here? I need to capture the value of each selected option and add it to a JSON object.

Answer 1

Check here : plunkerCode

<div ng-repeat="question in questions">
    <div class="row">
        <br/><span>Q{{$index+1}}. {{question.questiontxt}}</span>
    </div>
    <div ng-repeat="answer in question.Answer">
       <input type="radio" 
          name="question{{$parent.$index}}" 
          ng-value="{{answer.answertxt}}{{$parent.$index}}"/> 
            {{answer.answertxt}}
    </div>
</div>

I tried to simulate your code.

Answer 2

I made an example for you. I think that you have to modify this in function of your main object. The key is use the ng-value and the ng-model in the input radio

 function testCtrl($scope) { $scope.main = {}; $scope.main.questions = [{ Ques: { questiontxt: 'Question 1' }, Answer: [{ answertxt: "option 11", value: false, values: [true, false] }, { answertxt: "option 12", value: false, values: [true, false] }] }, { Ques: { questiontxt: 'Question 2' }, Answer: [{ answertxt: "option 21", value: false, values: [true, false] }, { answertxt: "option 22", value: false, values: [true, false] }] }, ]; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> <div ng-app> <div ng-controller="testCtrl"> <div ng-repeat="question in main.questions"> <div class="row"> <br/><span>Q{{$index+1}}. {{question.Ques.questiontxt}}</span> </div> <div ng-repeat="answer in question.Answer"> {{answer.answertxt}} <input type="radio" ng-value="true" ng-model="answer.value" />true <input type="radio" ng-value="false" ng-model="answer.value" />false </div> </div> {{main}} </div> </div> 

Answer 3

You can just take out the "name" property of the radio button and reference them by the model they have.

That worked for me.