Select at least one checkbox in AngularJS from each table - angularjs

Question

I have to validate a questionnaire before submitting it. The question-answer tables are generated dynamically from a JSON file. Before submitting the questionnaire, at least one answer should be checked from each question. For an unattempted question, it should validate as 'Please select at least one checkbox/answer'.
My problem: I am able to validate at least once checkbox selection for one question, but I not able to validate for all questions. It validates if any one of the checkbox is selected on whole page. I want each question should have at least one answer selected.
My code shows validation error [Please select at least one checkbox/answer'] even for the selected answer question. It should show validation error only on the questions which are not attempted [i.e. questions whose at least one answer is also not selected].
I have gone through multiple posts on AngularJS group check box validation, but I wasn't able to satisfy my problem.
Can anyone please help me out?
Thanks in advance!
quest_answer.json
[
{
"id": "0",
"header": "Fruits",
"question": "Which fruit do you like?",
"answer": [
{"aid": 0, "value" : "Apple", "isChecked" : false},
{"aid": 1, "value" : "Banana", "isChecked" : false},
{"aid": 2, "value" : "Strawberry", "isChecked" : false},
{"aid": 3, "value" : "Grapes", "isChecked" : false},
{"aid": 4, "value" : "Mango", "isChecked" : false}
],
"notes":""
},
{
"id": "1",
"header": "Vegetables",
"question": "Which vegetable do you like?",
"answer": [
{"aid": 0, "value" : "Potato", "isChecked" : false},
{"aid": 1, "value" : "Spinach", "isChecked" : false},
{"aid": 2, "value" : "Cabbage", "isChecked" : false},
{"aid": 3, "value" : "Brinjal", "isChecked" : false}
],
"notes":""
},
{
"id": "2",
"header": "Color",
"question": "Which color do you like?",
"answer": [
{"aid": 0, "value" : "Red", "isChecked" : false},
{"aid": 1, "value" : "Orange", "isChecked" : false},
{"aid": 2, "value" : "Green", "isChecked" : false},
{"aid": 3, "value" : "Blue", "isChecked" : false},
{"aid": 4, "value" : "Pink", "isChecked" : false}
],
"notes":""
},
{
"id": "3",
"header": "Animal",
"question": "Which animal do you like?",
"answer": [
{"aid": 0, "value" : "Monkey", "isChecked" : false},
{"aid": 1, "value" : "Dog", "isChecked" : false},
{"aid": 2, "value" : "Cat", "isChecked" : false},
{"aid": 3, "value" : "Cow", "isChecked" : false}
],
"notes":""
}
]
questionnaire.html
<div ng-init="init()">
<div class="module">
<div class="module-head">
<center><h3> <b>Evaluation</b> </h3></center>
</div>
<center>
<div class="module-body" >
<div> Questionnaire About the Project/Initiative</div>
<hr>
<form name="qForm" ng-submit="evaluate_Report(qForm.$valid)" novalidate>
<hr>
<div>Question Set</div>
<hr>
<div ng-repeat="myQuestion in questionnaire">
<table id="personal_table" class="table table-striped table-bordered table-hover" style="width:70%">
<tbody>
<hr>
<center><thead>{{myQuestion.header}}</thead></center>
<tr style="width:100%">
<th rowspan="{{questionnaire[$index].answer.length+1}}" scope="rowgroup"style="width:50%">
{{myQuestion.question}}</th>
<th style="width:2%">:</th>
<th style="width:48%">Tick all that apply
<div ng-show="qForm.$submitted && qForm.ansCheck.$error.required">
Please select atleast one checkbox</div>
</th>
</tr>
<tr ng-repeat="answer in questionnaire[$index].answer">
<td><input type="checkbox" name="ansCheck" ng-model="answer.isChecked" ng-change="selectAnswer($parent.$index, $index, answer)" ng-required="!anySelected($parent.$index,answer)" >
</td>
<td> {{answer.value}} </td>
</tr>
<tr style="width:100%">
<td style="width:50%" id="q2">Special Notes</td>
<td style="width:1%">:</td>
<td style="width:49%"><input type=text ng-model="personal_info_notes">
{{myQuestion.notes}} </td>
</tr>
</tbody>
</table>
</div>
<center>
<button type=submit id="btn_evaluate">Evaluate Report</button>
</center>
<hr>
<hr>
</div>
</div>
</div>
questionnaire.js
app.controller('questionnaire', ['$scope','$http','$sce','$routeParams',function($scope,
$http, $sce, $routeParams) {
$scope.questionAttempted = []; // an array containing question ids which are attempted
$scope.questionAnswerAttempted=[];//an array containing answers which are checked
$scope.init=function()
{
$http.get('quest_answer.json').then(function(questionnaireData){
$scope.questionnaire = questionnaireData.data;
});
}
$scope.selectAnswer = function(qIndex, aIndex, selectedAnswer)
{
var selectedIndex = $scope.questionAnswerAttempted.indexOf(selectedAnswer.value);
var selectedQuestion= $scope.questionAttempted.indexOf(qIndex);
if(selectedIndex == -1 && selectedAnswer.isChecked){
$scope.questionAnswerAttempted.push(selectedAnswer.value);
if(selectedQuestion == -1){
$scope.questionAttempted.push(qIndex);
}
}else if(!selectedAnswer.isChecked && selectedIndex != -1){
$scope.questionAnswerAttempted.splice(selectedIndex,1);
var aLength = $scope.questionnaire[qIndex].answer.length;
//Remove the question id from the questionAttempted array only if none of the answers are checked.
if(aLength >0){
for(a=0;a<aLength;a++){
if($scope.questionnaire[qIndex].answer[a].isChecked){
console.log("Atleast one answer is checked for this question.
So no of questions attempted remains same:" + $scope.questionAttempted.length);
flag = false;
break;
}else{
flag = true;
}
}
if(flag){
$scope.questionAttempted.splice(selectedQuestion,1);
console.log("No answers are checked for this question. So removing it");
console.log("No of questions attempted after splicing:" + $scope.questionAttempted.length);
}
}
}
}
// For ng-required attribute of checkboxes. Should return 'true' for attempted question and 'false' for unattempted question
$scope.anySelected = function(qIndex,answer){
var qaLength =$scope.questionAttempted.length;
if(qaLength > 0){
for(var q = 0; q < qaLength ; q++){
if($scope.questionAttempted[q] == qIndex ){
return true;
}else{
return false;
}
}
}else{
return false;
}
}
$scope.evaluate_Report = function(isValid)
{
if(isValid){
alert('Form is valid');
}else{
alert('Form is Incomplete');
}
}
}]);
app.controller('questionnaire', ['$scope','$http','$sce','$routeParams',function($scope, $http, $sce, $routeParams) {
$scope.questionAttempted = []; // an array containing question ids which are attempted
$scope.questionAnswerAttempted=[];//an array containing answers which are checked
$scope.init=function()
{
$http.get('quest_answer.json').then(function(questionnaireData){
$scope.questionnaire = questionnaireData.data;
});
}
$scope.selectAnswer = function(qIndex, aIndex, selectedAnswer)
{
var selectedIndex = $scope.questionAnswerAttempted.indexOf(selectedAnswer.value);
var selectedQuestion= $scope.questionAttempted.indexOf(qIndex);
if(selectedIndex == -1 && selectedAnswer.isChecked){
$scope.questionAnswerAttempted.push(selectedAnswer.value);
if(selectedQuestion == -1){
$scope.questionAttempted.push(qIndex);
}
}else if(!selectedAnswer.isChecked && selectedIndex != -1){
$scope.questionAnswerAttempted.splice(selectedIndex,1);
var aLength = $scope.questionnaire[qIndex].answer.length;
//Remove the question id from the questionAttempted array only if none of the answers are checked.
if(aLength >0){
for(a=0;a<aLength;a++){
if($scope.questionnaire[qIndex].answer[a].isChecked){
console.log("Atleast one answer is checked for this question. So no of questions attempted remains same:" + $scope.questionAttempted.length);
flag = false;
break;
}else{
flag = true;
}
}
if(flag){
$scope.questionAttempted.splice(selectedQuestion,1);
console.log("No answers are checked for this question. So removing it");
console.log("No of questions attempted after splicing:" + $scope.questionAttempted.length);
}
}
}
}
// For ng-required attribute of checkboxes. Should return 'true' for attempted question and 'false' for unattempted question
$scope.anySelected = function(qIndex,answer){
var qaLength =$scope.questionAttempted.length;
if(qaLength > 0){
for(var q = 0; q < qaLength ; q++){
if($scope.questionAttempted[q] == qIndex ){
return true;
}else{
return false;
}
}
}else{
return false;
}
}
$scope.evaluate_Report = function(isValid)
{
if(isValid){
alert('Form is valid');
}else{
alert('Form is Incomplete');
}
}
}]);
.module {
/* box-shadow: 0 0 3px rgba(0,0,0,.1); */
border-color: #e9e9e9;
margin-bottom: 50px;
background-color: #fff;
/* border-radius: 4px;*/
/* -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);*/
box-shadow: 0 1px 1px rgba(0,0,0,.05);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #ccc;
border-bottom-color: #bbb;
-webkit-box-shadow: 0 0 1px rgba(0,0,0,0.2);
-moz-box-shadow: 0 0 1px rgba(0,0,0,0.2);
box-shadow: 0 0 1px rgba(0,0,0,0.2);
}
.module-head {
color: #767676;
background-color: #f6f6f6;
border-color: #e9e9e9;
padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
.module-head h3 {
font-size: 20px;
line-height: 20px;
height: 20px;
margin: 0;
font-weight: bold;
}
.module-body {
padding: 15px;
width:1350px;
margin-right: auto;
margin-left: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- title and meta -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='REFRESH' content='43200'/>
<meta name="Pragma" content="no-cache;">
<title>Web</title>
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="css/theme.css">
</head>
<body ng-app="app">
<div ng-init="init()">
<div class="module">
<div class="module-head">
<center><h3> <b>Evaluation</b> </h3></center>
</div>
<center>
<div class="module-body" >
<div> Questionnaire About the Project/Initiative</div>
<hr>
<form name="qForm" ng-submit="evaluate_Report(qForm.$valid)" novalidate>
<hr>
<div>Question Set</div>
<hr>
<div ng-repeat="myQuestion in questionnaire">
<table id="personal_table" class="table table-striped table-bordered table-hover" style="width:70%">
<tbody>
<hr>
<center><thead>{{myQuestion.header}}</thead></center>
<tr style="width:100%">
<th rowspan="{{questionnaire[$index].answer.length+1}}" scope="rowgroup"style="width:50%">{{myQuestion.question}}</th>
<th style="width:2%">:</th>
<th style="width:48%">Tick all that apply <div ng-show="qForm.$submitted && qForm.ansCheck.$error.required">Please select atleast one checkbox</div> </th>
</tr>
<tr ng-repeat="answer in questionnaire[$index].answer">
<td><input type="checkbox" name="ansCheck" ng-model="answer.isChecked" ng-change="selectAnswer($parent.$index, $index, answer)" ng-required="!anySelected($parent.$index,answer)" >
</td><td> {{answer.value}} </td>
</tr>
<tr style="width:100%">
<td style="width:50%" id="q2">Special Notes</td>
<td style="width:1%">:</td>
<td style="width:49%"><input type=text ng-model="personal_info_notes">{{myQuestion.notes}} </td>
</tr>
</tbody>
</table>
</div>
<center><button type=submit id="btn_evaluate">Evaluate Report</button></center>
<hr>
<hr>
</div>
</div>
</div>
</center>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src= "scripts/core/angular/angular.js"></script>
<script src= "scripts/core/angular/angular-route.js"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="scripts/controllers/questionnaire.js" type="text/javascript"></script>
</body>
</html>