我试图让这个网络应用程序使用MEAN Stack工作,我处于死胡同。我不确定是什么问题。如果我刷新页面并开始输入,填写所有框,然后点击添加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> </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
答案 0 :(得分:0)
尝试使用$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调用才能使其正常工作。