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

我正在開發angularJS中的測驗應用程序。 HTML代碼是如何使用提交按鈕在angularJS中提交表單的所有詳細信息

<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（）點擊提交按鈕。

來源

2015-10-25 Gaurav

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

來源

2015-10-25 10:44:27 sobol6803

謝謝它的工作 – Gaurav

首先，您需要將輸入字段和按鈕放在表單標記中。然後將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>

來源

2015-10-25 10:14:01 pro

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

回答

相關問題