如何使用提交按钮在angularJS中提交表单的所有详细信息
Posted
技术标签:
【中文标题】如何使用提交按钮在angularJS中提交表单的所有详细信息【英文标题】：How to use submit button to submit all details of the form in 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()。
【问题讨论】：
【参考方案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>
【讨论】：
以上是关于如何使用提交按钮在angularJS中提交表单的所有详细信息的主要内容，如果未能解决你的问题，请参考以下文章