单击按钮时刷新列表 | Angularjs
Refresh list when button clicked | Angularjs
目前我有一个评论部分,人们可以在其中评论 post:
<li ng-repeat="comment in post.comments" class="list-group-item comment">
<span>
<a ui-sref="user-profile({id: comment.userId})" class="postLink"><strong>{{comment.author}}</strong></a> {{comment.body}} <span>
<p class="commentActions">
<span am-time-ago="comment.created_at"></span> ·
<span ng-if="comment.userId == auth.profile.user_id" ng-click="deleteComment(comment._id)" class="commentDelete">Delete</span>
</p>
</li>
而我想要完成的是在添加新评论时刷新上面的列表:
<form name="addComments">
<div class="form-group">
<label for="comment">Comment</label>
<textarea class="form-control" id="comment" rows="2" ng-model="body" required></textarea>
</div>
<div class="form-group">
<button ng-click="addComment()" class="btn margin-left btn-success" ng-disabled="addComments.$invalid">Comment</button>
</div>
</form>
使用以下内容,我只需将评论添加到数据库,并将其链接到 OP:
$scope.addComment = function(){
var dataObj = {
body : $scope.body,
userId : $scope.auth.profile.user_id,
author : $scope.auth.profile.name
};
postApi.postComment(id, dataObj)
.then(function(res){
$scope.post.comments.push(res);
});
$scope.body = "";
};
我的问题:如何刷新评论列表,这样我就可以立即看到评论,而不需要刷新我的页面?
这是一个非常简单的示例,说明它使用上面的代码工作。我删除了 "postApi" 调用,因为我不确定您是否使用 service/factory/or 其他东西来进行 api 调用。
http://codepen.io/jonathanburris/pen/EyjPgP
HTML
<div ng-app="app" ng-controller="controller">
<li ng-repeat="comment in post.comments" class="list-group-item comment">
<span>
<a ui-sref="user-profile({id: comment.userId})" class="postLink"><strong>{{comment.author}}</strong></a> {{comment.body}} <span>
<p class="commentActions">
<span am-time-ago="comment.created_at"></span> ·
<span ng-if="comment.userId == auth.profile.user_id" ng-click="deleteComment(comment._id)" class="commentDelete">Delete</span>
</p>
</li>
<form name="addComments">
<div class="form-group">
<label for="comment">Comment</label>
<textarea class="form-control" id="comment" rows="2" ng-model="body" required></textarea>
</div>
<div class="form-group">
<button ng-click="addComment()" class="btn margin-left btn-success" ng-disabled="addComments.$invalid">Comment</button>
</div>
</form>
</div>
JavaScript
var app = angular.module('app', []);
app.controller('controller', function Controller($scope) {
$scope.post = {
comments: [
{
body: 'Some text',
userId: 'someId',
author: 'Some User',
created_at: 'today'
},
{
body: 'Some text',
userId: 'someId',
author: 'Some User',
created_at: 'yesterday'
}
]
}
$scope.addComment = function() {
var dataObj = {
body: $scope.body,
userId: 'someId',
author: 'Some User'
};
$scope.post.comments.push(dataObj);
$scope.body = "";
};
});
我建议,如果您遵循此模式但问题仍然存在,那么您的 api 调用可能有误。如果是这样,你的 "then" 永远不会开火。在您的 api 电话中添加一个陷阱,您可以轻松地将其排除在您的问题之外。
目前我有一个评论部分,人们可以在其中评论 post:
<li ng-repeat="comment in post.comments" class="list-group-item comment">
<span>
<a ui-sref="user-profile({id: comment.userId})" class="postLink"><strong>{{comment.author}}</strong></a> {{comment.body}} <span>
<p class="commentActions">
<span am-time-ago="comment.created_at"></span> ·
<span ng-if="comment.userId == auth.profile.user_id" ng-click="deleteComment(comment._id)" class="commentDelete">Delete</span>
</p>
</li>
而我想要完成的是在添加新评论时刷新上面的列表:
<form name="addComments">
<div class="form-group">
<label for="comment">Comment</label>
<textarea class="form-control" id="comment" rows="2" ng-model="body" required></textarea>
</div>
<div class="form-group">
<button ng-click="addComment()" class="btn margin-left btn-success" ng-disabled="addComments.$invalid">Comment</button>
</div>
</form>
使用以下内容,我只需将评论添加到数据库,并将其链接到 OP:
$scope.addComment = function(){
var dataObj = {
body : $scope.body,
userId : $scope.auth.profile.user_id,
author : $scope.auth.profile.name
};
postApi.postComment(id, dataObj)
.then(function(res){
$scope.post.comments.push(res);
});
$scope.body = "";
};
我的问题:如何刷新评论列表,这样我就可以立即看到评论,而不需要刷新我的页面?
这是一个非常简单的示例,说明它使用上面的代码工作。我删除了 "postApi" 调用,因为我不确定您是否使用 service/factory/or 其他东西来进行 api 调用。
http://codepen.io/jonathanburris/pen/EyjPgP
HTML
<div ng-app="app" ng-controller="controller">
<li ng-repeat="comment in post.comments" class="list-group-item comment">
<span>
<a ui-sref="user-profile({id: comment.userId})" class="postLink"><strong>{{comment.author}}</strong></a> {{comment.body}} <span>
<p class="commentActions">
<span am-time-ago="comment.created_at"></span> ·
<span ng-if="comment.userId == auth.profile.user_id" ng-click="deleteComment(comment._id)" class="commentDelete">Delete</span>
</p>
</li>
<form name="addComments">
<div class="form-group">
<label for="comment">Comment</label>
<textarea class="form-control" id="comment" rows="2" ng-model="body" required></textarea>
</div>
<div class="form-group">
<button ng-click="addComment()" class="btn margin-left btn-success" ng-disabled="addComments.$invalid">Comment</button>
</div>
</form>
</div>
JavaScript
var app = angular.module('app', []);
app.controller('controller', function Controller($scope) {
$scope.post = {
comments: [
{
body: 'Some text',
userId: 'someId',
author: 'Some User',
created_at: 'today'
},
{
body: 'Some text',
userId: 'someId',
author: 'Some User',
created_at: 'yesterday'
}
]
}
$scope.addComment = function() {
var dataObj = {
body: $scope.body,
userId: 'someId',
author: 'Some User'
};
$scope.post.comments.push(dataObj);
$scope.body = "";
};
});
我建议,如果您遵循此模式但问题仍然存在,那么您的 api 调用可能有误。如果是这样,你的 "then" 永远不会开火。在您的 api 电话中添加一个陷阱,您可以轻松地将其排除在您的问题之外。