Как поймать выбранное значение из радиокнопки в AngularJS?

Привет всем, я пытаюсь задать вопрос MCQ, поэтому я пытаюсь поймать выбранное значение с помощью радиокнопки в AngularJS. Основная проблема, с которой я столкнулся, заключается в том, что я привязываю данные из базы данных, и они являются динамическими. Поэтому я должен использовать ng-repeat для загрузки этих вопросов в HTML-представлении, поэтому я не могу вручную обрабатывать «ng-модель» для этих параметров. когда я нажимаю кнопку отправки, мне нужно поймать вопрос с ответом вроде [{QuestionId: 1: AnswerId: 4}, {QuestionId: 1: AnswerId: 3} ...] или что-то в этом роде. Здесь я сделал данные JSON для предварительного просмотра сценария. Надеюсь, это поможет всем понять мою проблему и может решить мою проблему. Заранее спасибо.

Просмотреть код в jsfiddle

Вот 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();
    };
}

person Imtiaz Rifat    schedule 22.04.2015    source источник
comment
Если я выберу вариант D, то что вы хотите? OptionD_KPI значение или OptionD значение?   -  person Ramesh Rajendran    schedule 22.04.2015
comment
в этом случае мне нужен OptionD_KPI.   -  person Imtiaz Rifat    schedule 22.04.2015
comment
С идентификатором (например, с идентификатором вопроса). Правильно? результат выглядит как [{QuestionId:1:AnswerId:4},{QuestionId:1:AnswerId:3}...]?   -  person Ramesh Rajendran    schedule 22.04.2015
comment
да .... конечно, я хочу это в таком формате.   -  person Imtiaz Rifat    schedule 22.04.2015


Ответы (1)


Вам нужно использовать только ng-model asd[$index] вместо asd, у вас может быть что-то вроде этого

<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>

Поскольку вам нужна комбинация вопросов и ответов, вы могли бы сделать что-то вроде поддержки одного объекта $scope.asd = {}, так как у вас будет пара ключевых значений вопрос и ответ, например ["1": "2", "2":"3"], что означает, что вопрос 1 имеет ответ 2, а вопрос 2 выбрал ответ 3.

Демонстрация скрипта

person Pankaj Parkar    schedule 22.04.2015
comment
Пожалуйста, прочтите вопрос OP четко Moreover after submitting the answer i need catch the question with the answer.. OP хочет получить вопрос и ответ при нажатии кнопки отправки. - person Ramesh Rajendran; 22.04.2015
comment
@RameshRajendran Я обновил свой ответ ... пожалуйста, взгляните на него и удалите отрицательный голос, пожалуйста - person Pankaj Parkar; 22.04.2015
comment
Я не голосовал против вас, и я даже не могу проголосовать (за точку ниже). - person Imtiaz Rifat; 22.04.2015
comment
все равно не годится, теперь ему нужен результат должен быть [{QuestionId:1:AnswerId:4}, {QuestionId:1:AnswerId:3}...] Но все равно. это хорошее усилие. я удалил голос "против" - person Ramesh Rajendran; 22.04.2015
comment
@RameshRajendran Спасибо, что удалили отрицательный голос .. :) Думаю, вы это предложили ... позвольте мне взглянуть на это тоже .. - person Pankaj Parkar; 22.04.2015