AngularJS:通过无线电按钮组循环

Question

我正在进行AngularJS调查申请。我想一个一一展示任务。并且每个任务都可以通过单选按钮答案有一个或多个问题。我想在新数组中保存问题 答案对。

如果我只想显示每个任务的一个问题，就可以从无线电按钮中获得答案值并将其推入答案数组。但是，由于我每个页面都有多个问题和多个无线电按钮组，因此我找不到一种方法来获取所选的无线电按钮值并将它们推入答案数组。我读到NG模型可以解决这个问题，但我无法弄清楚。

这就是我到目前为止所拥有的：https：//jsfiddle.net/8qfom9th

<div ng-app="surveyApp" ng-controller="surveyCtrl">
<div ng-repeat="questionSet in questionSet">
    <div ng-if="question_index == $index">

          <div ng-repeat="onePageQuestions in questionSet.onePageQuestions">
            <div ng-repeat="question in onePageQuestions.question">
              {{question.description}}
              <form action="">
              <div ng-repeat="options in question.options">
                  <input type="radio" name="gender" ng-model="question.random" ng-value="options.answer"> {{options.answer}}
              </div>
            </form>
            </div>
          </div>
    </div>
</div>
<hr>
<button ng-click="next(); submitAnswers()">Next</button>

Answer 1

它实际上很简单。

您可以使用checked属性获得所选按钮的值。由于只能从组中选择一个单选按钮，因此您可以在JavaScript中的if循环中轻松地获得所选的值。

。

• 由于您已经给了无线电按钮的options name，即性别。您只需使用以下内容即可获取所有option的元素：

  var options = document.getElementsByName('gender');
  var option_value; //to get the selected value
  

• 下一步是循环循环所有按钮，并检查选择哪些按钮。要循环通过它们使用for循环，如下所示：for (var i = 0; i < options.length; i++) {...}

  要检查是否选择了它，请使用checked属性如下：

  if (options[i].checked) {
      option_value = options[i].value;
  }
  

我不确定您打算如何处理这些值，因此我认为您需要显示这些值并做到这一点，只需创建另一个元素，例如<div>并给它一个ID。然后只需将所选的选项值添加到该元素即可。应该是这样的：

html： <div id="selected">The selected options are:</div>

JS：document.getElementById('selected').innerHTML += "<br>" + option_value;

更新了小提琴。

或如果您想在这里检查它，这是更新的代码：

var app = angular.module('surveyApp', []);
app.controller('surveyCtrl', function($scope) {
  $scope.questionSet = [{
      onePageQuestions: [{
        question: [{
            description: 'question#1?',
            options: [{
              answer: 'answer#1'
            }, {
              answer: 'answer#2'
            }, {
              answer: 'answer#3'
            }]
          },
          {
            description: 'question#2?',
            options: [{
              answer: 'answer#4'
            }, {
              answer: 'answer#5'
            }, {
              answer: 'answer#6'
            }]
          }
        ]
      }]
    },
    {
      onePageQuestions: [{
        question: [{
          description: 'question#3?',
          options: [{
            answer: 'answer#7'
          }, {
            answer: 'answer#8'
          }, {
            answer: 'answer#9'
          }]
        }]
      }]
    }

  ];
  $scope.question_index = 0;
  $scope.next = function() {
    if ($scope.question_index >= $scope.questionSet.length - 1) {
      $scope.question_index = 0;
    } else {
      $scope.question_index++;
    }
  };
  $scope.submitAnswers = function() {
    var options = document.getElementsByName('gender');
    var option_value;
    for (var i = 0; i < options.length; i++) {
      if (options[i].checked) {
        option_value = options[i].value;
        document.getElementById('selected').innerHTML += "<br>" + option_value;
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="surveyApp" ng-controller="surveyCtrl">
  <div ng-repeat="questionSet in questionSet">
    <div ng-if="question_index == $index">
      <div ng-repeat="onePageQuestions in questionSet.onePageQuestions">
        <div ng-repeat="question in onePageQuestions.question">
          {{question.description}}
          <form action="">
            <div ng-repeat="options in question.options">
              <input type="radio" name="gender" ng-model="question.random" ng-value="options.answer"> {{options.answer}}
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <hr>
  <button ng-click="next(); submitAnswers()">Next</button>
  <hr>
  <div id="selected">The selected options are:
  </div>
</div>

Answer 2

用于动态广播按钮的parent.answer使用CC_12。对于您的用例，我添加了一个saveAnswers功能来操纵和保存用户答案。

以下是您用例演示的代码，运行并查看Console中更新的questionSet。

var app = angular.module('surveyApp', []);
app.controller('surveyCtrl', function($scope) {
  $scope.answer = '';
  $scope.saveAnswers = function(description, options) {
    $scope.questionSet.map(function(value, key) {
      value.onePageQuestions.map(function(item, index) {
        item.question.map(function(question, count) {
          if (question.description === description.description) {
            question.answer = options;
          }
        })
      })
    })
  }
  $scope.questionSet = [{
      onePageQuestions: [{
        question: [{
            description: 'question#1?',
            answer: '',
            options: [{
              answer: 'answer#1'
            }, {
              answer: 'answer#2'
            }, {
              answer: 'answer#3'
            }]
          },
          {
            description: 'question#2?',
            answer: '',
            options: [{
              answer: 'answer#4'
            }, {
              answer: 'answer#5'
            }, {
              answer: 'answer#6'
            }]
          }
        ]
      }]
    },
    {
      onePageQuestions: [{
        question: [{
          description: 'question#3?',
          answer: '',
          options: [{
            answer: 'answer#7'
          }, {
            answer: 'answer#8'
          }, {
            answer: 'answer#9'
          }]
        }]
      }]
    }

  ];
  $scope.question_index = 0;
  $scope.next = function() {
    if ($scope.question_index >= $scope.questionSet.length - 1) {
      $scope.question_index = 0;
    } else {
      $scope.question_index++;
    }
  };
  $scope.submitAnswers = function() {
    console.log($scope.questionSet)
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="surveyApp" ng-controller="surveyCtrl">
  <div ng-repeat="questionSet in questionSet">
    <div ng-if="question_index == $index">
      <div ng-repeat="onePageQuestions in questionSet.onePageQuestions">
        <div ng-repeat="question in onePageQuestions.question">
          {{question.description}}
          <form action="">
            <div ng-repeat="options in question.options">
              <input ng-change="saveAnswers(question,options.answer)" type="radio" name="gender" ng-model="$parent.answer" ng-value="options.answer"> {{options.answer}}
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <hr>
  <button ng-click="next()">Next</button>
  <button ng-click="submitAnswers()"> Submit</button>

希望这对您有帮助！