Currently, I'm using three nested ng-repeat directives to display multiple questions and their corresponding answers. Everything is displaying correctly so far, but now I need to create a form to save the answers. What would be the best approach to achieve this? I've been experimenting with the following code:
<form>
<div class="panel panel-default" ng-repeat="section in questionsTest">
<div class="panel-heading">
<h1>{{ section.name }}</h1>
<h3 class="panel-title">{{ section.name }}. {{
section.description }}</h3>
</div>
<div class="panel-body" ng-repeat="question in section.questions">
{{ question.statement }}
<div ng-repeat="answer in question.answers">
<label class="radio-inline"> <input type="{{ answer.type }}" ng-model="test.idRadioButton"
name="{{ question.id }}" id="{{ answer.id }}" value="{{ answer.id }}">
{{ answer.valor }}
</label>
</div>
</div>
</div>
</form>
Here's the JSON data structure for reference:
{
"section": [{
"name": "Section 1",
"questions": [{
"statement": "First question",
"answers": [{
"valor": "1",
"id": 3,
"type": "radio"
}, {
"valor": "2",
"id": 4,
"type": "radio"
}, {
"valor": "3",
"id": 7,
"type": "radio"
}, {
"valor": "4",
"id": 8,
"type": "radio"
}, {
"valor": "5",
"id": 9,
"type": "radio"
}, {
"valor": "6",
"id": 10,
"type": "radio"
}, {
"valor": "7",
"id": 11,
"type": "radio"
}],
"id": 1
}, {
"statement": "Question 3",
"answers": [{
"valor": "Yes",
"id": 1,
"type": "radio"
}, {
"valor": "No",
"id": 2,
"type": "radio"
}],
"id": 3
}, {
"statement": "Question 4",
"answers": [{
"valor": "Yes",
"id": 1,
"type": "radio"
}, {
"valor": "No",
"id": 2,
"type": "radio"
}],
"id": 4
}],
"description": "Description",
"id": 1
}
However, I'm encountering an issue where clicking on one question selects all the others as well. As a newcomer to Angular, I'm unsure how to resolve this. Any guidance would be greatly appreciated. Thanks!
I have managed to make it 'work', but I am struggling to store all the clicked radio buttons. Here's what my controller looks like:
$scope.question = {};
$scope.testing = function(){
console.log($scope.question);
};
The testing function is simply used to display the values stored in $scope.question on the console.