如何使用提交按钮在angularJS中提交表单的所有详细信息 [英] How to use submit button to submit all details of the form in angularJS
问题描述
我正在用angularJS开发一个测验应用程序. HTML代码是
I am developing a quiz application in angularJS. The HTML code is
`
<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文件是
And the javascript file is
$scope.submitAnswer =function (){
}
$scope.submitAnswer =function (){
}
我希望当用户回答所有问题时，单击提交"按钮时，应将所有单选按钮(答案)的值传递给submitAnswer().
I want when the user answers all the questions, all the values of radio button(answers) should be passed to submitAnswer() on clicking submit button.
推荐答案
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'
Now every answer to each question will be stored in an array in the model. The structure of the model looks like this:
$scope.model.question[$index] = 'value'
问题从0开始索引，因此第一个问题在$scope.model.question[0].现在，如果要将其发送到API，只需通过$http发送question数组即可.
Questions are indexed from 0, so first question is at $scope.model.question[0]. Now if you want to send it to the API, just send the question array via $http.
这篇关于如何使用提交按钮在angularJS中提交表单的所有详细信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
