0
我有一個頁面應用程序，它應該顯示數據庫中的對象列表。我用ng-repeat來創建一個模板來綁定數據庫中的數據。由於我是Angular的新手，任何幫助都會很棒。我的代碼如下：ng-repeat不與數據庫綁定
SERVER.JS
var express = require('express');
var app = express();
var mongojs = require('mongojs');
var db = mongojs('eventlist', ['eventlist']);
var bodyParser = require('body-parser');
app.use(express.static(__dirname + "/public"));
app.use(bodyParser.json());
app.get('/eventlist', function (req, res) {
console.log("i received a get request")
db.eventlist.find(function(err, docs){
console.log(docs);
res.json(docs);
});
});
app.post('/eventlist', function (req, res){
console.log(req.body);
db.eventlist.insert(req.body, function (err, doc) {
res.json(doc);
});
});
app.delete('/eventlist/:id', function(req, res){
var id = req.params.id;
console.log(id);
db.eventlist.remove({_id: mongojs.ObjectID(id)}, function (err, doc) {
res.json(doc);
});
});
app.get('/eventlist/:id', function (req, res) {
var id = req.params.id;
console.log(id);
db.eventlist.findOne({_id: mongojs.ObjectId(id)}, function (err, doc) {
res.json(doc);
});
});
app.put('/eventlist/:id', function (req, res) {
var id = req.params.id;
console.log(req.body.name);
db.eventlist.findAndModify({
query: {_id: mongojs.ObjectId(id)},
update: {$set: {name: req.body.name, startDate: req.body.startDate, price: req.body.price, location: req.body.location}},
new: true}, function (err, doc) {
res.json(doc);
}
);
});
app.listen(4000);
console.log("Server running on port 4000");INDEX.HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/page.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>Capstone Project</title>
<meta name="description" content="Carnival and Event Mapping tool">
<link rel="manifest" href="/manifest.json">
</head>
<body>
<div id="wrapper">
<div class="overlay"></div>
<!-- Sidebar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
<ul class="nav sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Brand
</a>
</li>
<li>
<a href="#">Enter Zip Code</a>
</li>
<li>
<input type="text"/><button>Submit</button>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Events Near Me<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-header">Select Radius</li>
<li><a href="#">5 Miles</a></li>
<li><a href="#">10 Miles</a></li>
<li><a href="#">15 Miles</a></li>
</ul>
</li>
<li>
<a href="#">Ascending</a>
</li>
<li>
<a href="#">Descending</a>
</li>
<li>
<a href="mailto:[email protected]">Contact</a>
</li>
</ul>
</nav>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<button type="button" class="hamburger is-closed" data-toggle="offcanvas">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
<div class="container" ng-controller="AppCtrl">
<h1>Summer Event List</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Date</th>
<th>Price</th>
<th>Location</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="form-control" ng-model="event.name"></td>
<td><input class="form-control" ng-model="event.startDate"></td> <!--type="date" (put this next to startDate)-->
<td><input class="form-control" ng-model="event.price"></td> <!--$<input type="number" name="currency" min="0" max="9999" step="0.01" size="4"
title="CDA Currency Format - no dollar sign and no comma(s) - cents (.##) are optional" />-->
<td><input class="form-control" ng-model="event.location"></td>
<td><button class="btn btn-primary" ng-click="addEvent()">Add Event</button></td>
<td><button class="btn btn-primary" ng-click="deselect()">Clear</button></td>
</tr>
<tr ng-repeat="event in eventlist"> <!--also tried ng-repeat="event in eventlist track by $indexs"-->
<td>{{event.name}}</td>
<td>{{event.startDate}}</td>
<td>{{event.price}}</td>
<td>{{event.location}}</td>
<!-- <td><button class="btn btn-danger" ng-click="remove(contact._id)">Remove</button></td>
<td><button class="btn btn-warning" ng-click="edit(contact._id)">Edit</button></td> -->
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js" charset="utf-8"></script>
<script src="controllers/controller.js" charset="utf-8"></script>
</body>
</html>
</div>
<!-- /#page-content-wrapper -->
<script>
$(document).ready(function() {
var trigger = $('.hamburger'),
overlay = $('.overlay'),
isClosed = false;
trigger.click(function() {
hamburger_cross();
});
function hamburger_cross() {
if (isClosed == true) {
overlay.hide();
trigger.removeClass('is-open');
trigger.addClass('is-closed');
isClosed = false;
} else {
overlay.show();
trigger.removeClass('is-closed');
trigger.addClass('is-open');
isClosed = true;
}
}
$('[data-toggle="offcanvas"]').click(function() {
$('#wrapper').toggleClass('toggled');
});
});
</script>
</body>
</html>CONTROLLER.JS
var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', ['$scope', '$http', function($scope, $http) {
console.log("Hello World from controller");
var refresh = function(){
$http.get('/eventlist/').then(function(response) {
console.log("I got the data I requested");
$scope.eventlist = response;
$scope.event = null;
});
};
refresh();
$scope.addEvent = function() {
console.log($scope.event);
$http.post('/eventlist/', $scope.event).then(function(response){
console.log(response);
refresh();
});
$scope.update = function() {
console.log($scope.event._id);
$http.put('/eventlist/' + $scope.event._id, $scope.event).then(function(response) {
refresh();
})
};
};
$scope.remove = function(id) {
console.log(id);
$http.delete('/eventlist/' + id).then(function(response) {
refresh();
});
};
$scope.edit = function(id) {
console.log(id);
$http.get('/eventlist/' + id).then(function(response) {
$scope.event = response;
});
};
$scope.deselect = function() {
$scope.event = null;
refresh();
};
}]);
完美!!!!非常感謝 –