【问题标题】:How to save angular form data?如何保存角形数据?
【发布时间】:2016-04-02 23:50:45
【问题描述】:

我是 MEAN 堆栈的新手,所以我想尝试用它制作一个基本表单。我使用角度表单验证创建了它,但我无法将它保存到 mongodb。我的问题是我不明白如何将通过表单字段提交的内容放入 app.js。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js'></script>
</head>
<body ng-app="GenApp">
  <div ng-controller="FormController">
  <form name="form" class="registration-form" novalidate>
    Name:
    <input type="text" ng-model="user.name" name="uName" required="" />
    <br />
    <div ng-show="form.$submitted || form.uName.$touched">
      <div ng-show="form.uName.$error.required">Tell us your name.</div>
    </div>

    E-mail:
    <input type="email" ng-model="user.email" name="uEmail" required="" />
    <br />
    <div ng-show="form.$submitted || form.uEmail.$touched">
      <span ng-show="form.uEmail.$error.required">Input your email</span>
      <span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
    </div>
    <input type="button" ng-click="reset(form)" value="Reset" />
    <input type="submit" ng-click="update(user)" value="Save" />
  </form>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script src="js/controller.js"></script>
  <script src="app.js"></script>
</div>
</body>
</html>

controller.js

var app = angular.module("GenApp", []);

app.controller('FormController', ['$scope', function($scope) {
  $scope.master = {};

  $scope.update = function(user) {
    $scope.master = angular.copy(user);

  };

  $scope.reset = function(form) {
    if (form) {
      form.$setPristine();
      form.$setUntouched();
    }
    $scope.user = angular.copy($scope.master);
  };

  $scope.reset();
}]);

app.js(服务器)

var express = require('express');
var app = express();
var mongoose = require('mongoose');
var database_url = "mongodb://test:test@ds035965.mongolab.com:35965/addressbook";
var port = process.env.PORT || 8080;

mongoose.connect(database_url);

var Schema = mongoose.Schema;

var personSchema = new Schema({
    name: String,
    email: String
});

var Person = mongoose.model('Person', personSchema);

有谁知道我将如何解决这个问题?谢谢!

【问题讨论】:

    标签: javascript angularjs node.js forms mongodb


    【解决方案1】:

    尝试创建 REST API,并通过 POST 请求提交您的用户数据

    app.js (server)
    
    app.post("/user/:name", function(req,res,next){
    //persistence logic
    });
    
    
    controller.js
    
    app.controller('FormController', ['$scope','$http', function($scope,$http) {
      $scope.master = {};
    
      $scope.update = function(user) {
        $scope.master = angular.copy(user);
       $http({
        method: 'POST',
        url: hostname:port + '/user/' + user.name
      }).then(function successCallback(response) {
    
      }, function errorCallback(response) {
    
      });
    
      };
    
      $scope.reset = function(form) {
        if (form) {
          form.$setPristine();
          form.$setUntouched();
        }
        $scope.user = angular.copy($scope.master);
      };
    
      $scope.reset();
    }]);
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2018-06-08
      • 2020-12-23
      • 2017-10-11
      • 2018-01-02
      • 2013-11-12
      • 1970-01-01
      • 2021-04-13
      相关资源
      最近更新 更多