MEAN Stack 未正确填充数据答案

【问题标题】：MEAN Stack not populating data properlyMEAN Stack 未正确填充数据
【发布时间】：2016-05-02 13:53:51
【问题描述】：

我正在尝试使用 MEAN Stack 让这个 Web 应用程序工作，但我陷入了死胡同。我不确定问题是什么。如果我刷新页面并开始输入，填写所有框，然后点击添加 PC。正如我从控制台看到的那样，该应用程序获取对象数据。但是它不会进入我的 MongoDB。发生的事情是我的集合中的每个对象都被传递给 Angular 3 次以上。如果我要在当前填充的对象之一上点击“编辑”，则信息不会填充在顶部，但我可以插入一个新项目并点击“添加 PC”，它可以工作（但我没有编辑当前数据）。

由于某种原因，当我向应用程序添加数据（以插入到集合中）时，出现了一堆幻像框。

删除和清除工作正常。

Controller.js：

var PClistApp = angular.module('PClistApp', []);
PClistApp.controller('AppCtrl', ['$scope', '$http', function($scope, $http) {

var refresh = function() {
  $http.get('/pclist').success(function(response) {
  $scope.pclist = response;
//$scope.pclist = "";
  });
};

refresh();

$scope.addPC = function() {
  console.log($scope.pclist);
  $http.post('/pclist', $scope.pclist).success(function(response) {
    console.log(response);
    refresh();
  });
};

$scope.remove = function(id) {
  console.log(id);
  $http.delete('/pclist/' + id).success(function(response) {
    refresh();
  });
};

$scope.edit = function(id) {
  console.log(id);
  $http.get('/pclist/' + id).success(function(response) {
    $scope.pclist = response;
  });
};  

$scope.update = function() {
      console.log($scope.pclist._id);
      $http.put('/pclist/' + $scope.pclist._id, $scope.pclist).success(function(response) {
        refresh();
      })
};

$scope.deselect = function() {
 $scope.pclist = "";
    refresh();
}
}]);

Server.js：

var express = require('express');
var app = express();
var mongojs = require('mongojs');
var db = mongojs('pclist', ['pclist']);
var bodyParser = require('body-parser');

app.use(express.static(__dirname + '/public'));
app.use(bodyParser.json());

app.get('/pclist', function (req, res) {
  db.pclist.find(function (err, docs) {
    console.log(docs);
    res.json(docs);
  });
});

app.post('/pclist', function (req, res) {
  console.log(req.body);
  db.pclist.insert(req.body, function(err, doc) {
    res.json(doc);
  });
});

app.delete('/pclist/:id', function (req, res) {
  var id = req.params.id;
  console.log(id);
  db.pclist.remove({_id: mongojs.ObjectId(id)}, function (err, doc) {
    res.json(doc);
  });
});

app.get('/pclist/:id', function (req, res) {
  var id = req.params.id;
  console.log(id);
  db.pclist.findOne({_id: mongojs.ObjectId(id)}, function (err, doc) {
    res.json(doc);
  });
});

app.put('/pclist/:id', function (req, res) {
  var id = req.params.id;
  console.log(req.body.name);
  db.pclist.findAndModify({
    query: {_id: mongojs.ObjectId(id)},
    update: {$set: {pcname: req.body.pcname, floor: req.body.floor, department: req.body.department, user: req.body.user, type: req.body.type}},
new: true}, function (err, doc) {
      res.json(doc);
    }
  );
});

app.listen(3000);
console.log("Server running on port 3000");

index.html:

<!DOCTYPE = html>
<html ng-app="PClistApp">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

  <title>PC List App</title>
</head>
<body>
  <div class="container" ng-controller="AppCtrl">
    <h1>PC List App</h1>

    <table class="table">
      <thead>
        <tr>
          <th>PC Name</th>         
          <th>Floor</th>
          <th>Department</th>
          <th>User</th>
          <th>Type</th>
          <th>Action</th>
          <th>&nbsp;</th>
        </tr>
      </thead>
      <tbody>
        <tr>
            <td><input class="form-control" ng-model="pclist.pcname"></td>
            <td><input class="form-control" ng-model="pclist.floor"></td>
            <td><input class="form-control" ng-model="pclist.department"></td>
            <td><input class="form-control" ng-model="pclist.user"></td>
            <td><input class="form-control" ng-model="pclist.type"></td>
            <td><button class="btn btn-primary" ng-click="addPC()">Add PC</button></td>
            <td><button class="btn btn-info" ng-click="update()">Update</button></td>
            <td><button class="btn btn-info" ng-click="deselect()">Clear</button></td>
        </tr>
        <tr ng-repeat="pclist in pclist">
          <td>{{pclist.pcname}}</td>
          <td>{{pclist.floor}}</td>
          <td>{{pclist.department}}</td>
          <td>{{pclist.user}}</td>
          <td>{{pclist.type}}</td>
          <td><button class="btn btn-danger" ng-click="remove(pclist._id)">Remove</button></td>
          <td><button class="btn btn-warning" ng-click="edit(pclist._id)">Edit</button></td>
        </tr>
      </tbody>
    </table>

  </div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<script src="controllers/controller.js"></script>
</body>
</html>

When entering data and hitting Add PC right after refresh

Server side when entering data and hitting Add PC right after refresh

【问题讨论】：

标签： angularjs node.js mongodb mean-stack meanjs

【解决方案1】：

尝试使用$resource 而不是 $http 来加载“pclist”，并尝试修改“pclist”而不是总是刷新它。

angular.module('PClistApp').controller('AppCtrl', [
  '$scope',
  '$http',
  '$resource,
  function($scope, $http, $resource) {

    // load list
    var pclist = $scope.pclist = $resource('/pclist').query(
      {},
      function() { console.log('pclist loaded'); }
    );

    // create a list item
    $scope.addPC = function(item) { // where 'item' is new item object
      $http.post('/pclist', item)
        .success(function(newListItem) {
          pclist.push(newListItem); 
        });
    };

    // update a list item
    $scope.update = function(item, update) { // where 'item' is item object and 'update' contains fields to be updated
      $http.put('/pclist/'+item.id, update)
        .success(function() {
          item = angular.extend(item, update);
        });
    };

    // remove a list item
    $scope.remove = function(item) { // where 'item' is item object to be removed
      $http.delete('/pclist/'+item.id).success(function() {
        pclist.splice(pclist.indexOf(item), 1);
      });
    };

  }
]);

您需要调整一些 ng-click 调用以使其正常工作。

【讨论】：