如何使用Angular收集多个表单提交并立即提交给猫鼬模型? [英] How to use angular to collect many form submits and submit at once to mongoose model?

问题描述

我正在尝试保存包含多个问题的调查.一项调查有很多问题.同样，必须进行许多调查.每次输入问题和答案并单击 saveQuestion 按钮.我正在使用Angular，并希望将其保存在数组中(前端).保存调查的所有问题并单击 saveSurvey 按钮后，我要将调查保存到猫鼬模式.

I am trying to save surveys that contain multiples questions. One survey has many questions. Likewise there must be many surveys. Each time I enter a question and the answers and click the saveQuestion button. I am using Angular and want to save that in an array (in front end). After I save all the questions of a survey and click the saveSurvey button, I want to save the survey to the mongoose schema.

我可以为表单使用两个提交按钮吗?如果没有解决办法? 我在上一个问题中曾问过这个问题.

Can I use two submit buttons for a form? If not what is the solution? I had asked about this issue in my previous question.

如何在嵌套猫鼬模式中将输入数组保存到子模式?

但是我不知道如何收集前端数组中的表单提交并立即发送到邮寄路线.

我搜索了很多内容，可能与"ng-repeat"有关.

I searched a lot and may be there is something to do with 'ng-repeat'.

MyForm

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);

我如何发布到猫鼬模式

How I post to the mongoose schema

 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;

推荐答案

您可以将多个问题推送到数组中，最后将多个问题提交给api.

You can push multiple question in an array and finally submit to api with multiple question.

以相同的形式添加一个按钮以将问题推送到数组中，并添加另一个按钮以将调查信息提交给api.

in the same form add a button to push question in an array and another button to submit survey information to 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);
  };

有关更多详细信息，请参见 PLUNKER 和

For more details see PLUNKER and server part in another question answer

这篇关于如何使用Angular收集多个表单提交并立即提交给猫鼬模型?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！