Store user selected multiple radio button option(s) in angular js built with ng-repeat

Question

I am stuck in a small problem where I have a bunch of questions built on html from array using ng-repeat like this where by clicking previous and next button user can navigate between questions.

 <ul>
        <li ng-repeat="q in questions">
            <h2>{{q.Question}}</h2>
            <label class="radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> {{q.isTrue}}
            </label>
            <label class="radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> {{q.isFalse}}
            </label>
        </li>
 </ul>
    <button type="button" class="btn btn-primary" ng-click="prevQuestion()">Prev</button>
    <button type="button" class="btn btn-primary" ng-click="nextQuestion()">Next</button>
    <button type="submit" class="btn btn-primary"ng-click="onSubmit()">Submit</button>

Controller code is

function controller($scope, quizService) {
    $scope.questions = [];
    updQuestion();

        function updQuestion() {
            var id = 1;

            quizService.getQuestions(id).success(function (data) {
                $scope.questions = data;
            });

            $scope.nextQuestion = function () {
                id++;
                quizService.getQuestions(id).success(function (data) {
                    $scope.questions = data;
                });
            };

            $scope.prevQuestion = function () {
                id--;
                quizService.getQuestions(id).success(function (data) {
                    $scope.questions = data;
                });
            }
        }
    }

and service code

 function getQuestions(id) {
        return $http.get('/api/quiz/' + id);
    }

My question is how do I write on onSubmit() so that it holds all checked/selected radio options in a array like structure.

What I am looking for

If I have 5 (actually 5*2) radio buttons for 5 questions ,I want to get the selected options for each 5 questions.

Thanks all.

Vanojx1 · Accepted Answer · 2016-02-01 14:25:40Z

1

this is the angular way :

// the main (app) module
var myApp = angular.module("myApp", []);

// add a controller
myApp.controller("myCtrl", function($scope) {
  $scope.questions = [{
    Question: "QUESTION 1",
    isTrue: "ISTRUE 1",
    isFalse: "ISFALSE 1"
  },{
    Question: "QUESTION 2",
    isTrue: "ISTRUE 2",
    isFalse: "ISFALSE 2"
  },{
    Question: "QUESTION 3",
    isTrue: "ISTRUE 3",
    isFalse: "ISFALSE 3"
  },{
    Question: "QUESTION 4",
    isTrue: "ISTRUE 4",
    isFalse: "ISFALSE 4"
  }];
  
  $scope.getAnswers = function(){
       
    
     var answers = $scope.questions.map(function(question){
       return question.answer;
     });
    
     alert(answers);
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="q in questions track by $index">
      <h2>{{q.Question}}</h2>
      <label class="radio-inline">
        <input type="radio" ng-model="q.answer" value="A" name="inlineRadioOptions_{{$index}}" id="inlineRadio1" value="option1">{{q.isTrue}}
      </label>
      <label class="radio-inline">
        <input type="radio" ng-model="q.answer" value="B" name="inlineRadioOptions_{{$index}}" id="inlineRadio2" value="option2">{{q.isFalse}}
      </label>
    </li>
  </ul>
  <button ng-click="getAnswers()">GET ANSWERS</button>
  {{questions}}
</body>

edited Feb 1, 2016 at 14:25

answered Feb 1, 2016 at 14:13

Vanojx1

5,5842 gold badges25 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Navoneel Talukdar Over a year ago

Thnx @Vanojx1 .but my objective is to capture all selected options when user submits.

Vanojx1 Over a year ago

you ve all the selected values inside the questions object

Navoneel Talukdar Over a year ago

sorry didnt get you.How do I construct an array of having only selected answers?

Collectives™ on Stack Overflow

Store user selected multiple radio button option(s) in angular js built with ng-repeat

What I am looking for

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

What I am looking for

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related