如何使用提交按钮提交 angularJS 中表单的所有详细信息

Question

我正在 angularJS 开发一个测验应用程序。 HTML代码是

`

    <div class='question' ng-repeat='question in quiz ' value='{{$index}}'>
        <h3>{{$index+1}}. {{question.q}}</h3>
            <div ng-repeat = "options in question.options">
            <input type='radio'> <strong>{{options.value}}</strong>

            </div>
    </div>

    <input type="button" value="Submit" ng-click= submitAnswer()> 
    <script src="quizController.js"></script>
</body>

`

javascript 文件是

$scope.submitAnswer =function (){ }

我希望当用户回答所有问题时，单选按钮（答案）的所有值都应在单击提交按钮时传递给 submitAnswer()。

Answer 1

首先，您需要将输入字段和按钮放入表单标签中。然后将 ng-submit 指令添加到表单并为其分配 submitAnswer() 函数。

确保您的按钮类型也是 "submit"，而不是 "button"。

   <form ng-submit="submitAnswer()">
    <div class='question' ng-repeat='question in quiz ' value='{{$index}}'>
        <h3>{{$index+1}}. {{question.q}}</h3>
        <div ng-repeat = "options in question.options">
            <input type='radio'> <strong>{{options.value}}</strong>
        </div>
    </div>
    <button type="button">Submit</button>
   </form>

Answer 2

function quizCtrl($scope) {
  $scope.model = {
    question: []
  };

  $scope.quiz = [{
    q: 'Question1',
    options: [{
      value: 'a'
    }, {
      value: 'b'
    }]
  }, {
    q: 'Question2',
    options: [{
      value: 'c'
    }, {
      value: 'd'
    }]
  }];

  $scope.submitAnswer = function() {
    console.log($scope.model);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app>
  <div ng-controller="quizCtrl">
    <div class="question" ng-repeat="question in quiz">
      <h3>{{$index+1}}. {{question.q}}</h3>

      <div ng-repeat="option in question.options">
        <input type="radio" ng-model="model.question[$parent.$index]" value="{{option.value}}">
        <strong>{{option.value}}</strong>
      </div>
    </div>
    <input type="button" value="Submit" ng-click="submitAnswer()">
    <div>{{model}}</div> <!-- for debugging -->
  </div>
</body>

现在每个问题的每个答案都将存储在模型中的一个数组中。模型的结构如下所示： $scope.model.question[$index] = 'value'

问题从 0 开始索引，因此第一个问题在 $scope.model.question[0]。现在，如果您想将其发送到 API，只需通过 $http.

发送 question 数组

如何使用提交按钮提交 angularJS 中表单的所有详细信息

How to use submit button to submit all details of the form in angularJS

javascript

html

angularjs

onsubmit

submit-button