0
私はMEANスタックを使用してこのWebアプリケーションを動作させようとしています。私は問題が何であるか分かりません。私のページを更新して入力を開始し、すべてのボックスに記入して、「PCを追加」を押します。私はコンソールから見ることができるように、アプリケーションはオブジェクトデータを取得します。しかし私のMongoDBには向かない。私のコレクションのすべてのオブジェクトがAngular 3+回に渡されるのはどういうことでしょう。現在入力されているオブジェクトの1つで編集を押すと、情報は上部に表示されませんが、新しいアイテムを挿入して[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> </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
