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

【问题标题】：How to use submit button to submit all details of the form in angularJS如何使用提交按钮在angularJS中提交表单的所有详细信息
【发布时间】：2016-01-24 10:20:43
【问题描述】：

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

【问题讨论】：

标签： javascript html angularjs onsubmit submit-button

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

确保您的按钮类型也是“提交”，而不是“按钮”。

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

【讨论】：