Comment attraper la valeur sélectionnée du bouton radio dans AngularJS?

Question

Bonjour tout le monde j'essaye de faire une question de QCM pour que j'essaye d'attraper la valeur choisie du bouton radio dans AngularJS. Le principal problème auquel je suis confronté est que je lie les données de la base de données et celles-ci sont dynamiques. Donc je dois utiliser ng-repeat en chargeant ces questions en vue HTML, donc je ne peux pas gérer manuellement le "ng-model" pour ces options. Lorsque vous cliquez sur le bouton Soumettre, j'ai besoin d'attraper la question avec la réponse comme [{QuestionId: 1: AnswerId: 4}, {QuestionId: 1: AnswerId: 3} ...] ou quelque chose comme ça. Ici, j'ai créé une donnée JSON pour prévisualiser le scénario. J'espère que cela aidera tous à comprendre mon problème et peut résoudre mon problème. Merci d'avance.

Afficher le code dans jsfiddle

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

C'est js

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

Answer 1

Vous devez utiliser ng-modelasd[$index] au lieu de asd seulement, vous pourrait avoir quelque chose comme celui-ci

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

Comme vous voulez question & combinaison de réponses, vous pouvez faire quelque chose comme ne maintenir un objet $scope.asd = {} dans ce que vous auriez la valeur paire de clés de la question & réponse, comme ["1": "2", "2":"3"] qui ne signifie pas que la question 1 a réponse 2 & question 2 a choisi réponse 3.

Fiddle Demo