Reputation: 4614
I am putting together a questionnaire. Each question is inserted with an ng-repeat and each questions has multiple choice items. I am inserting these multiple choice items as radio buttons using angular material's md-radio-group. Choosing one of those three radio buttons on question 1 reflects on all the following questions. Any help is appreciated.
Update: I created a CodePen that duplicates the problem. Found at:
<div class="main" ng-app="MyApp">
<div ng-controller="AppCtrl as asaq">
<h1>{{ asaq.title }}</h1>
<form name="collection" novalidate>
<div class="questionnaire">
<div class="questions">
<div class="question" ng-repeat="question in asaq.questions">
<h2>Question {{ question.hrsQuestionOrderNumber }} <span>of {{ asaq.questions.length }}</span></h2>
<p>
{{ question.descriptionLong }}
</p>
<div class="options">
<md-radio-group ng-model="asaq.answers.group">
<md-radio-button ng-repeat="option in question.choiceModels" ng-value="option.description254" required>
{{ option.description254 }}
</md-radio-button>
</md-radio-group>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
Javascript:
angular
.module('MyApp',['ngMaterial', 'ngMessages'])
.controller('AppCtrl', function() {
var self = this;
self.title = 'md-radio-group within ng-repeat';
self.questions = [
{
"hrsQuestionOrderNumber": 1,
"descriptionLong": "Do you collect money from anyone?",
"choiceModels": [
{
"description254": "Yes"
},
{
"description254": "No"
},
{
"description254": "None / Not applicable",
}
]
},
{
"hrsQuestionOrderNumber": 2,
"descriptionLong": "Are pre-numbered receipts given to the person paying money?",
"choiceModels": [
{
"description254": "Yes"
},
{
"description254": "No",
},
{
"description254": "None / Not applicable"
}
]
},
{
"hrsQuestionOrderNumber": 3,
"descriptionLong": "Do cash receipts or logs contain sufficient detail to accurately describe the nature of the transaction?",
"choiceModels": [
{
"description254": "Yes"
},
{
"description254": "No"
},
{
"description254": "None / Not applicable"
}
]
},
{
"hrsQuestionOrderNumber": 4,
"descriptionLong": "Do receipts or logs identify individuals and not groups of individuals?",
"choiceModels": [
{
"description254": "Yes"
},
{
"description254": "No"
},
{
"description254": "None / Not applicable"
}
]
},
{
"hrsQuestionOrderNumber": 5,
"descriptionLong": "For money collected, is it always deposited and never used for purchases?",
"choiceModels": [
{
"description254": "Yes",
},
{
"description254": "No"
},
{
"description254": "None / Not applicable"
}
]
},
{
"hrsQuestionOrderNumber": 6,
"descriptionLong": "For money not yet deposited, is it kept in a secure location?",
"choiceModels": [
{
"description254": "Yes"
},
{
"description254": "No"
},
{
"description254": "None / Not applicable"
}
]
},
{
"hrsQuestionOrderNumber": 7,
"descriptionLong": "Do you keep a file of original deposit documentation—including cash receipts or logs—together?",
"choiceModels": [
{
"description254": "Yes"
},
{
"description254": "No"
},
{
"description254": "None / Not applicable"
}
]
}
];
})
.config(function($mdIconProvider) {
});
Upvotes: 1
Views: 3016
Reputation: 3988
You are using a same scope
variable for storing all the answers. You need seperate variable for each answer. So take a look at this pen. I just added one more field to store answer in questions
object.
http://codepen.io/next1/pen/vGxEgX
Upvotes: 1