我正在创建一个非常简单的AnjularJS SPA,通过API连接到Mongoose。该应用程序将只接受一个新成员,显示新成员,如果我点击列表中的成员名称,我应该能够在另一个屏幕上编辑该成员。
但是当我点击一个成员名称进行编辑时,它并没有给我另一个页面上的成员进行编辑,就像我无法指定要编辑的正确成员一样。当我将鼠标悬停在成员名称上时,我希望看到该成员的Mongoose的id,但我只看到:
localhost:4000 /#/ members /(我想我应该看到(带有来自Mongoose的id)????:localhost:4000 /#/ members / 553778bb92de243be1c61c6d)
我的索引在哪里出错' s / id'
这是我的members.html页面,用于显示成员列表,当我点击成员名称来编辑该成员时,我应该可以移动到新页面,但我不能。见" {{memb.name |大写}}"下面...
members.html
<div class="col-sm-7 col">
<div class="CSSTableGenerator" >
<h2 align="center">Registered Club Members</h2>
<table>
<tr><td>Name</td><td>Address</td><td>Age</td><td>Level</td><td>Able To
Swim</td><td>Email</td><td>Registration Date</td></tr>
<tr ng-repeat="memb in members" >
<td>
<a href="#/members/{{member._id}}">{{memb.name | uppercase}}
</a>
</td>
<td>
{{memb.address }}
</td>
<td>
{{memb.age }}
</td>
<td>
{{memb.level }}
</td>
<td>
{{memb.swimmer }}
</td>
<td>
{{memb.email }}
</td>
<td>
{{memb.regdate }}
</td>
</tr>
</table>
</div>
</div>
我的APP.JS:
var app = angular.module("myApp",['ngRoute'])
app.config(function ($routeProvider) {
$routeProvider
.when('/members',
{
controller: 'MembersController',
templateUrl: './partials/members.html'
})
.when('/members/:member_index',
{
controller: 'MemberDetailController',
templateUrl: './partials/member_edit.html'
})
.when('/home',
{
//controller: 'MembersController',
templateUrl: './partials/home.html'
})
.otherwise({ redirectTo: '/home' });
})
app.factory('SimpleFactory', ['$http', function($http){
var factory = {};
var members = $http.get('/api/members')
factory.getMembers = function ()
{
//return members;
return members = $http.get('/api/members');
}
factory.getMember = function (member_id) {
return members[member_id] = $http.get('/api/members/' +
member_id )
}
factory.addMember = function(member) {
return $http.post('/api/members',member)
}
factory.updateMember = function(member_id,member) {
return $http.put('/api/members/' + member_id, member)
}
return factory;
}])
app.controller('MembersController', ['$scope','SimpleFactory',
function ($scope,SimpleFactory) {
SimpleFactory.getMembers()
.success(function(members) {
$scope.members = members;
});
$scope.addMember = function()
{
var member = {
name: $scope.newMember.name,
address: $scope.newMember.address,
age : $scope.newMember.age,
level : $scope.newMember.level,
swimmer : $scope.newMember.swimmer,
email : $scope.newMember.email,
regdate : $scope.newMember.regdate,
}
SimpleFactory.addMember(member)
.success(function(added_member)
{
$scope.members.push(added_member);
$scope.newMember = { }
} );
}
}])
app.controller('MemberDetailController',
['$scope','$location','$routeParams','SimpleFactory',
function ($scope,$location,$routeParams,SimpleFactory) {
SimpleFactory.getMember($routeParams.member._id).then(function(data){
$scope.member = {
index : $routeParams.member._id,
detail : data.user
};
});
$scope.updateMember = function() {
SimpleFactory.updateMember($scope.member._id, $scope.member.detail)
.then(function(data) {
$location.path('/members')
});
};
}])
我的INDEX.JS
var express = require('express');
var controller = require('./members.controller');
var router = express.Router();
router.get('/', controller.index);
router.get('/:id', controller.show);
router.post('/', controller.create);
router.put('/:id', controller.update);
module.exports = router;
我的会员.MODEL.JS
var mongoose = require('mongoose') var Schema = mongoose.Schema;
var MemberSchema = new Schema({
name: String,
address: String,
age: String,
level: String,
swimmer: String,
email: String,
regdate: String
});
module.exports = mongoose.model('members', MemberSchema);
我的会员.CONTROLLER.JS
var _ = require('lodash')
var Member = require('./member.model');
function handleError(res, err) {
return res.send(500, err);
}
// Get list of members
exports.index = function(req, res) {
Member.find(function (err, members) {
if(err) { return handleError(res, err); }
return res.json(200, members);
});
} ;
// Creates a new member in datastore.
exports.create = function(req, res) {
Member.create(req.body, function(err, member) {
if(err) { return handleError(res, err); }
return res.json(201, member);
});
};
exports.show = function(req, res) {
Member.findById(req.params.id, function (err, member) {
if(err) { return handleError(res, err); }
return res.json(200, member);
});
} ;
// Update an existing member in datastore.
exports.update = function(req, res) {
Member.findById(req.params.id, function (err, member) {
member.name = req.body.name
member.address = req.body.address
member.age = req.body.age
member.level = req.body.level
member.swimmer = req.body.swimmer
member.email = req.body.email
member.regdate = req.body.regdate
member.save(function (err) {
if(err) { return handleError(res, err); }
return res.send(200, 'Update successful');
});
});
}
任何人都可以帮忙吗?这是一个简单的APP,但我只是在学习,现在完全被困在这里!
由于
答案 0 :(得分:1)
member.html中的a
代码应绑定到memb._id
,而不是members._id
。像这样:
<a ng-href="#/members/{{memb._id}}">{{memb.name | uppercase}}</a>