gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-27 23:44:42 26 4
gpt4 key购买 nike

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

我希望当用户回答所有问题时,单选按钮(答案)的所有值都应在单击提交按钮时传递给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] = '值'

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

关于javascript - 如何使用提交按钮在angularJS中提交表单的所有详细信息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33326752/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com