使用 MEAN 堆栈从 angularjs Form 存储数组数据

Question

我正在使用MEAN 堆栈。在创建新文章时，我想保存数组数据。下面的代码有 deal 部分，它需要是一个数据数组，我无法存储数组数据。如何修改我的 html 部分和 angularJS 控制器，以便我可以为deal 存储如下数据@

{
"_id": "565d8a3a0ede9823aca797e9",
"user": {
"_id": "564ef3eaebf280b0abcc4876",
"displayName": "Table 2"
},
"__v": 0,
"deal": ["Special","Holiday"],
"name": "Idli",
"created": "2015-12-01T11:53:30.759Z"
}

我的 NodeJS 服务器模型

var FoodSchema = new Schema({
created: {
    type: Date,
    default: Date.now
  },
name: {
    type: String,
    default: '',
    required: 'Please fill Food name',
    trim: true
  },
  deal: [{
      type: String,
      default: '',
      trim: true
  }],
  user: {
    type: Schema.ObjectId,
    ref: 'User'
  }
});

我的 AngularJS 控制器

$scope.create = function (isValid) {
  $scope.error = null;

  if (!isValid) {
    $scope.$broadcast('show-errors-check-validity', 'foodForm');

    return false;
  }

  // Create new Food object
  var food = new Foods({
    name: this.name,
    deal: this.deal,

  // Redirect after save
  food.$save(function (response) {
    $location.path('foods/' + response._id);

    // Clear form fields
    $scope.name = '';
    $scope.deal = '';
  }, function (errorResponse) {
    $scope.error = errorResponse.data.message;
  });
};

HTML 部分

<section ng-controller="FoodsController">
<div layout="row" layout-wrap class="create-food">

    <form name="foodForm" ng-submit="create(foodForm.$valid)" novalidate>
        <div class="col-md-12">
            <md-input-container flex="">
            <label >Food Name</label>
            <input type="text" data-ng-model="name" id="name"  required>
        </md-input-container>
    </div>

<div class="col-md-6">

    <md-input-container class="">
    <label class="" for="deal">Deal</label>
    <input type="text" data-ng-model="deal" id="deal"   required>
</md-input-container>
</div>
<md-button type="submit">Create Food</md-button>

</form>
</div>
</section>

Answer 1

如果您想在浏览器上存储数据，您可以使用新的 html5 功能 localStorage(key,value) 您放置一些用于获取的键和类似 json 的值。

这不仅仅是为了会话！

Answer 2

好吧，我看到您已经更新了您的猫鼬模型架构并在前端进行了一些更新，但是您的服务器 API 的当前状态是什么？您是否为请求定义了任何端点？

换句话说（使用MEAN.js的文章示例）：

var articlesPolicy = require('../policies/articles.server.policy'),
    articles = require('../controllers/articles.server.controller');

module.exports = function (app) {
    // Articles collection routes
    app.route('/api/articles').all(articlesPolicy.isAllowed)
        .get(articles.list)
        .post(articles.create);

    // Single article routes
    app.route('/api/articles/:articleId').all(articlesPolicy.isAllowed)
        .get(articles.read)
        .put(articles.update)
        .delete(articles.delete);

    // Finish by binding the article middleware
    app.param('articleId', articles.articleByID);
};

您是否已经为 Food 设置了类似的设置？

设置好路由后，您应该验证服务器控制器逻辑并查看数据是否被正确处理并保存到 mongodb。

编辑解释在 MEAN.js 中将数据保存到 mongodb 的工作流程：

出于安全原因，只能从服务器访问数据库。您不能直接从 angularjs 访问 mongodb。流程是：angular通过请求（例如：GET、POST、PUT、DELETE）将数据传递给expressjs。然后在服务器中，您应该能够通过定义路由端点来捕获请求。在这些路由端点中，您可以指定路由中间件（即服务器控制器），然后使用 mongoose 与 mongodb 进行交互。