user308553 user308553 - 10 months ago 76
AngularJS Question

nested ng-repeat, radio button validate

I have two nested ng-repeat that generate multiples questions and each question contain a bunch of radio buttons. I'm having trouble coming up with a efficient way to display the validation error message when no radio is selected for a certain question, and get all the selected choices when user hit select

<li ng-repeat="question in questionModel.questionaire">{{question.question}}
<span style = "color:red" ng-show = "!!!ANOTHER CONDITION HERE!!! && questionModel.submitClicked != false">Please choose an answer </span>


<li ng-repeat="answer in question.answers">
<input type="radio"


How do you suggest I approach this? Use getElementById on
then check all the children node? that sound really messy though, but it is easy, I can easily get all the button that was checked. Is there a better way to approach this for the validation error message?

If all radio buttons were under same question that would be easy, I can just ng-model on the radio button.

edit: addition info


myApp.controller('questionController', function($scope, $http, toServer){

$scope.questionModel = {
questionaire: [],
submitClicked: false,

handleChange: function(ans){

submit: function(){
this.submitClicked = true;

$scope.questionModel.questionaire = response;


a service I created for ajax call:

//this service handle all the ajax call to server
myApp.factory('toServer', function($http){

return {

get_All_Questions: function(callback){
var url = "/health1/server/questions";

item.answers = (item.answers != null) ? item.answers.split(",") : [];
item.answered = false;
console.log("error " + response)



structure of the $scope.questionModel.questionaire (the response from server) is an array of json:

[{id: "1", question: "what's your name?", answers: ["tom", "mary"]},
{id: "2", question: "what's your age?", answers: [1, 2]}


There was no property to recognize whether the question has been answered. So, i took the effort of creating such a property as isAnswered = true/false and initialized it to false on default.

angular.forEach($scope.questionModel.questionaire, function(ques) {
    ques.isAnswered = false;
    return ques;

When an answer is selected, the function handleChange sets isAnswered = true.

handleChange: function(ans, ques){
    ques.isAnswered = true;

Finally, On submit click, the condition checks whether submit is clicked and if any question is unanswered, it will show the following message:

<span style = "color:red" 
   ng-show = "questionModel.submitClicked && !question.isAnswered">
   Please choose an answer 

Working Plunker