How to catch selected value from Radio button in AngularJS?

Question

Hello every one i'm trying to make a MCQ question from for that I'm trying to catch selected value from Radio button in AngularJS. Main problem i'm facing that i'm binding data from database and those are dynamic. So i have to use ng-repeat from loading those questions in view HTML, so i can't manually handle the "ng-model" for those options. when click the submit button i need catch the question with the answer like [{QuestionId:1:AnswerId:4}, {QuestionId:1:AnswerId:3}...] or something like that. Here I've made a JSON data for previewing the scenario. Hope it'll help all to understand my problem and may solve my problem. Thanks in advance.

View code in jsfiddle

Here is the HTML

<div ng-app="myapp">
<div ng-controller="testController">
   <form>
    <div ng-repeat="qus in QusWithOptions">
        <td>{{qus.id}}. {{qus.Question}} </td><br />               
<input type="radio" name="taskGroup{{qus.id}}" ng-model="asd" value="{{qus.OptionA_KPI}}" />{{qus.OptionA}}
<input type="radio" name="taskGroup{{qus.id}}" ng-model="asd" value="{{qus.OptionB_KPI}}" />{{qus.OptionB}}
<input type="radio" name="taskGroup{{qus.id}}" ng-model="asd" value="{{qus.OptionC_KPI}}" />{{qus.OptionC}}
<input type="radio" name="taskGroup{{qus.id}}" ng-model="asd" value="{{qus.OptionD_KPI}}" />{{qus.OptionD}}
         </div>
    <button ng-click="SaveAnswer(asd)">Submit</button>
    </form>
</div>

This is Js file

    var app = angular.module("myapp",[]);

    function testController($scope){
    $scope.QusWithOptions = [
        {id:1, Question: "What is best social network site?", OptionA: "facebook", OptionB: "twitter", OptionC: "google+", OptionD: "others",OptionA_KPI:1,OptionB_KPI:2,OptionC_KPI:3,OptionD_KPI:4  },
        {id:2, Question: "Entomology is the science that studies ?", OptionA: "Behavior of human beings", OptionB: "Insects", OptionC: "Origin of scientific terms", OptionD: "The formation of rocks", OptionA_KPI:1,OptionB_KPI:2,OptionC_KPI:3,OptionD_KPI:4 },
        {id:3, Question: "Eritrea, which became the 182nd member of the UN in 1993, is in the continent of ?", OptionA: "Asia", OptionB: "Europe", OptionC: "Australia", OptionD: "Europe", OptionA_KPI:1,OptionB_KPI:2,OptionC_KPI:3,OptionD_KPI:4},
        {id:4, Question: "For the Olympics and World Tournaments, the dimensions of basketball court are ?", OptionA: "26 m x 14 m", OptionB: "28 m x 15 m", OptionC: "27 m x 16 m", OptionD: "28 m x 16 m",OptionA_KPI:1,OptionB_KPI:2,OptionC_KPI:3,OptionD_KPI:4 },];

    $scope.SaveAnswer = function(){
         window.alert();
    };
}

If i select option D, then what you want? Is OptionD_KPI value or OptionD value? — Ramesh Rajendran
– Ramesh Rajendran, Commented Apr 22, 2015 at 6:51
With the id (like question Id). Is am correct? the result look like [{QuestionId:1:AnswerId:4},{QuestionId:1:AnswerId:3}...] ? — Ramesh Rajendran
– Ramesh Rajendran, Commented Apr 22, 2015 at 6:56

Ramesh Rajendran · Accepted Answer · 2015-04-22 07:15:59Z

5

You need to use ng-model asd[$index] instead of asd only, You could have something like this

<div ng-controller="testController">
    <form>
        <div ng-repeat="qus in QusWithOptions">
            <td>{{qus.id}}. {{qus.Question}} </td>
            <br />

            <input type="radio" name="taskGroup{{qus.id}}" ng-model="asd[$index]" value="{{qus.OptionA_KPI}}" />{{qus.OptionA}}
            <input type="radio" name="taskGroup{{qus.id}}" ng-model="asd[$index]" value="{{qus.OptionB_KPI}}" />{{qus.OptionB}}
            <input type="radio" name="taskGroup{{qus.id}}" ng-model="asd[$index]" value="{{qus.OptionC_KPI}}" />{{qus.OptionC}}
            <input type="radio" name="taskGroup{{qus.id}}" ng-model="asd[$index]" value="{{qus.OptionD_KPI}}" />{{qus.OptionD}}
        </div>
        {{asd}}
        <button ng-click="SaveAnswer(asd)">Submit</button>
    </form>
</div>

As you want question & answer combination, you could do something like do maintain one object $scope.asd = {} in that you would have key value pair of question & answer, like ["1": "2", "2":"3"] which does mean that question 1 has answer 2 & question 2 has selected answer 3.

Fiddle Demo

edited Apr 22, 2015 at 7:15

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

answered Apr 22, 2015 at 6:44

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

5 Comments

Ramesh Rajendran Over a year ago

Please read the OP question clearly Moreover after submitting the answer i need catch the question with the answer.. The OP want the question and answer when click the submit button.

Pankaj Parkar Over a year ago

@RameshRajendran I updated my answer..please take a look at it & remove the downvote please

Imtiaz Rifat Over a year ago

i didn't down voted you, and i can't even vote(for below point).

Ramesh Rajendran Over a year ago

still not good, now he needs the result should be [{QuestionId:1:AnswerId:4}, {QuestionId:1:AnswerId:3}...] But any way. it's nice effort. i removed the down vote

Pankaj Parkar Over a year ago

@RameshRajendran Thanks for removing downvote..:) I think you have proposed it..let me look at that too..

Collectives™ on Stack Overflow

How to catch selected value from Radio button in AngularJS?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related