多くのフォーム提出物を収集して一度にモンゴーズモデルに提出するには、angularをどのように使用するのですか？

Question

複数の質問を含むアンケートを保存しようとしています。 1つの調査には多くの質問があります。同様に、多くの調査が必要です。質問と回答を入力するたびにsaveQuestionボタンをクリックします。私はAngularを使用しており、これを配列に保存したい（フロントエンドで）。アンケートのすべての質問を保存してsaveSurveyボタンをクリックしたら、アンケートをmongooseスキーマに保存します。

フォームに2つの送信ボタンを使用できますか？解決策は何ですか？ 私は以前の質問でこの問題について尋ねました。

How to save array of inputs to a child schema in a nested mongoose schema?

しかし、私は、フロントエンドで、配列にフォームの提出を収集し、一度にルートをポストに送信する方法がわかりません。

私はたくさんの検索をしましたが、「ng-repeat」と関連があるかもしれません。

MyFormを

<form class="form-horizontal" action="/CreateSurvey" method="post"> 
<div class="form-group"> 
    <div> 
     <div class="col-sm-9"> 
      <input type="text" name="que" placeholder="Click to enter question" style="width: 100%;"> 
     </div> 
    </div> 

    <div> 
     <div class="col-sm-9"> 
      <input type="text" name="ans1" placeholder="Click to enter answer" style="width: 100%;"> 
     </div> 
    </div> 

    <div> 
     <div class="col-sm-9"> 
      <input type="text" name="ans2" placeholder="Click to enter answer" style="width: 100%;"> 
     </div> 
    </div> 

    <div> 
     <div class="col-sm-9"> 
      <input type="text" name="ans3" placeholder="Click to enter answer" style="width: 100%;"> 
     </div> 
    </div> 

    <div> 
     <div class="col-sm-offset-3 col-sm-9"> 
      <button type="submit" class="btn btn-default">Save Question</button> 
     </div> 
    </div> 

    <div> 
     <div class="col-sm-offset-3 col-sm-9"> 
      <button type="submit" class="btn btn-default">Save Survey</button> 
     </div> 
    </div> 
</div> 

マングースモデル

var mongoose = require("mongoose"); 
var Schema = mongoose.Schema; 

var SurveySchema = new Schema({ 
    surveyname: String, 

    question : [{ 
     que: String, 
     ans1: String, 
     ans2: String, 
     ans3: String, 
     ans4: String 

     }] 
    }); 

module.exports=mongoose.model('Survey',SurveySchema); 

私はトンを投稿する方法マングーススキーマ

var express = require('express'); 
var router = express.Router(); 
var Survey = require('../models/QBank'); 

router.post('/', function(req, res, next){ 

new Survey({ 
surveyname: req.body.surveyname, 
question : [{ 
    que: req.body.que, 
    ans1:req.body.ans1, 
    ans2: req.body.ans2, 
    ans3: req.body.ans3, 
    ans4:req.body.ans4 

    }] 

}).save(function(err, doc){ 
    if(err) res.json(err); 
    else 
    req.flash('success_msg', 'User registered to Database'); 
    res.redirect("/CreateSurvey"); 

}); 
}); 

module.exports = router; 

Answer 1

oをあなたは、複数のフォームを持っているか、いないのですか？あなたが1つのフォームを持っているなら、フロントエンドに質問を保存するためにsubmitをタイプする代わりにinput typeボタンを使うことができます。入力タイプボタンをng-clickして、そのコントローラの配列に保存することができます。 あなたがしている場合の質問は動的であるあなたがモデルだあなたにタイプ[ミックス]を使用することができます。..

が、私の考えでは、あなたはjqueryのAJAXを使用してデータを送信することができますし、フォーム要素

を使用する必要はありません

Answer 2

配列内で複数の質問をプッシュし、最後に複数の質問でapiに送信できます。

同じフォームに質問を配列にプッシュするボタンを追加し、別のボタンをクリックしてapiにサーベイ情報を送信します。

HTML：

<form class="form-horizontal" ng-submit="addSurvay()"> 
    <div class="form-group"> 
     <label for="s" class="col-sm-2 control-label">S Name</label> 
     <div class="col-sm-10"> 
     <input type="text" class="form-control" id="s" ng-model="surveyname" placeholder="Survay name"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="q" class="col-sm-2 control-label">Question</label> 
     <div class="col-sm-10"> 
     <input type="text" class="form-control" id="q" ng-model="questionObj.que" placeholder="Question"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="a1" class="col-sm-2 control-label">Answer 1</label> 
     <div class="col-sm-10"> 
     <input type="text" class="form-control" id="a1" ng-model="questionObj.ans1" placeholder="Answer 1"> 
     </div> 
    </div> 
    // ans 2,3,4 div 
    <div class="form-group"> 
     <div class="col-sm-offset-2 col-sm-10"> 
     <button type="button" class="btn btn-default" ng-click="addQuestion()">Add question</button> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-sm-offset-2 col-sm-10"> 
     <button type="submit" class="btn btn-default">Add survey</button> 
     </div> 
    </div> 

    </form> 

コントローラコード：

$scope.addQuestion = function() { 
    $scope.question.push($scope.questionObj); 
    $scope.questionObj ={}; 
    }; 

    $scope.addSurvey = function() { 
    $scope.data ={surveyname:$scope.surveyname, question: $scope.question}; 
    $http.post('/path', $scope.data); 
    }; 

詳細についてはanother question answer