Question

我正在制作AngularJs调查应用程序。我想一一展示任务。每个任务可以有一个或多个带有单选按钮答案的问题。我想将问题+答案对保存在新数组中。

如果我只希望每个任务只显示一个问题，则我无法从单选按钮获取答案值，然后将其推入答案数组。但是由于我每页有多个问题和多个单选按钮组，因此无法找到一种方法来获取选定的单选按钮值并将其推入Answers数组。我已经读过ng-model可以解决这个问题，但是我不知道如何解决。

这是我到目前为止的内容：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，即 gender 。您可以使用以下命令简单地获取所有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;

更新了您的fiddle。

或者，如果您想在此处进行检查，这是更新的代码：

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的{{1}}用于动态单选按钮。对于您的用例，我添加了一个ng-model函数来操纵和保存用户答案。

以下是您的用例演示的代码，运行它并在控制台中查看更新的saveAnswers。

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

希望这对您有帮助！

AngularJS：遍历单选按钮组

2 个答案: