Javascript 如何在Angular/Express/MongoDB应用程序中按ID显示单个博客文章
我不知道如何通过ID获取一篇博客文章——我对这一点非常陌生 到目前为止，我的主博客应用程序有一个ng repeat，可以获取所有帖子。我想要的是能够点击帖子的名称，只显示该帖子，而不显示其他内容——最终我也希望能够通过ID进行删除和编辑 我知道过滤器存在，但我不确定如何通过单击启用过滤器，或者如何确保当我单击它时，它将根据该id进行过滤 我的“post.html”如下所示-Javascript 如何在Angular/Express/MongoDB应用程序中按ID显示单个博客文章,javascript,angularjs,mongodb,Javascript,Angularjs,Mongodb,我不知道如何通过ID获取一篇博客文章——我对这一点非常陌生 到目前为止，我的主博客应用程序有一个ng repeat，可以获取所有帖子。我想要的是能够点击帖子的名称，只显示该帖子，而不显示其他内容——最终我也希望能够通过ID进行删除和编辑 我知道过滤器存在，但我不确定如何通过单击启用过滤器，或者如何确保当我单击它时，它将根据该id进行过滤 我的“post.html”如下所示- <div ng-controller="PostController" class="panel panel-def
<div ng-controller="PostController" class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<strong>
<a href ng-click="selectTab('viewPost')">{{post.title}}</a>
</strong> created on {{post.time | date: 'MM/dd/yy @ h:mma'}}
</h3>
</div>
<div class="panel-body">
{{post.body}} <br>
{{post._id}}
</div>
</div>
<body ng-controller="PanelController">
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<nav-bar></nav-bar>
</div>
<div ng-controller="PostController">
<div ng-show="isSelected('blog')">
<div ng-repeat="post in posts | orderBy: 'time':true">
<blog-post></blog-post>
</div>
</div>
<div ng-show="isSelected('about')">
<about-page></about-page>
</div>
<div ng-show="isSelected('contact')">
<contact></contact>
</div>
<div ng-show="isSelected('createPost')">
<create-post></create-post>
</div>
<div ng-show="isSelected('viewPost')">
<view-post></view-post>
</div>
</div>
</div>
您需要将您的响应数据分配到$scope.post，它看起来像这样
$http(...).then(function(response) {
$scope.post = response.post;
});
看起来你正试图根据状态的变化来显示不同的内容——这就是angular应用程序通常使用的路由检查。基本上，不是为每个状态/页面显示一堆ng，而是向$stateProvider注册这些状态/页面，然后在用户单击内容时在状态/页面之间转换。$http不同于$resource。。。你不能在url字符串中为routeParams使用占位符。当我不上夜班时，我会好好看看ui路由器和$resource！非常感谢您的回复。最初我使用ng click执行getPost以及isSelected函数，并将post ID作为参数，我使用它与get请求中的url连接，而不是现在的：post_ID。谢谢你的回复！当我更改它时，它说它不是JS控制台中的函数。
$scope.getPost = function () {
$http({method: 'GET', url: '/api/blog/:post_id', data: $scope.postById})
.then(function(response){
//your code in case the post succeeds
console.log(response);
})
.catch(function(err){
//your code in case your post fails
console.log(err);
});
}
<body ng-controller="PanelController">
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<nav-bar></nav-bar>
</div>
<div ng-controller="PostController">
<div ng-show="isSelected('blog')">
<div ng-repeat="post in posts | orderBy: 'time':true">
<blog-post></blog-post>
</div>
</div>
<div ng-show="isSelected('about')">
<about-page></about-page>
</div>
<div ng-show="isSelected('contact')">
<contact></contact>
</div>
<div ng-show="isSelected('createPost')">
<create-post></create-post>
</div>
<div ng-show="isSelected('viewPost')">
<view-post></view-post>
</div>
</div>
</div>
router.route('/blog/:post_id')
.get(function(req, res) {
Post.findById(req.params.post_id, function(err, post) {
if (err) {
res.send(err);
} else {
res.json(post);
}
});
})
.put(function(req, res) {
Post.findById(req.params.post_id, function(err, post) {
if (err) {
res.send(err);
} else {
post.title = req.body.title;
post.body = req.body.body;
}
post.save(function(err) {
if (err) {
res.send(err);
} else {
res.json({ message: 'Post updated!' });
}
});
});
})
.delete(function(req, res) {
Post.remove({
_id: req.params.post_id
}, function(err, post) {
if (err) {
res.send(err);
} else {
res.json({ message: 'Successfully deleted' });
}
});
});
$http(...).then(function(response) {
$scope.post = response.post;
});