如何使用提交按鈕在angularJS中提交表單的所有詳細信息

Question

我正在用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（）。

Answer 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數組。

Answer 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中提交表單的所有詳細信息

問題描述

2 個解決方案

解決方案1
1 已采納 2015-10-25 10:44:27

解決方案2
0 2015-10-25 10:14:01

如何使用提交按鈕在angularJS中提交表單的所有詳細信息

問題描述

2 個解決方案

解決方案1 1 已采納 2015-10-25 10:44:27

解決方案2 0 2015-10-25 10:14:01

解決方案1
1 已采納 2015-10-25 10:44:27

解決方案2
0 2015-10-25 10:14:01