如何从 AngularJS 的单选按钮中捕获选定的值？

Question

大家好，我正在尝试提出一个 MCQ 问题，因为我试图从 AngularJS 的单选按钮中捕获选定的值。我面临的主要问题是我正在绑定数据库中的数据，而这些数据是动态的。所以我必须使用 ng-repeat 在视图 HTML 中加载这些问题，所以我无法手动处理这些选项的“ng-model”。当单击提交按钮时，我需要用 [{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>

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

你需要使用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。

小提琴演示