将用户选择的多个单选按钮选项存储在使用 ng-repeat(s）构建的角度 js 中

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

本文关键字：ng-repeat 构建 js 选择 用户 单选按钮 存储 选项      更新时间：2023-09-26

我陷入了一个小问题，我有一堆问题建立在数组中的html上，使用这样的ng-repeat，通过单击上一个和下一个按钮用户可以在问题之间导航。

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

控制器代码为

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

和服务代码 

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

我的问题是如何在onSubmit()上写入，以便它将所有选中/选择的无线电选项保存在类似数组的结构中。

我在寻找什么

如果我有 5 个（实际上是 5*2）用于 5 个问题的单选按钮，我想为每 5 个问题获取所选选项。

谢谢大家。

这是

角度方式：

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

相关文章：