如何在angularJS中使用提交按钮来提交表单的所有细节

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

本文关键字：提交 表单 细节 按钮 angularJS      更新时间：2023-09-26

我正在用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 (){ }

我想当用户回答所有问题时，单选按钮(answers)的所有值都应该在单击提交按钮时传递给submitAnswer()。

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数组。

首先需要将输入字段和按钮放入表单标记中。然后将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>
相关文章：