Refresh list when button clicked | Angularjs

Question

Currently I have a comments section where people can comment on a 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>

And what I'm trying to accomplish, is for the above list to refresh when a new comment is added:

<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>

Using the following, I simply add the comment to the database, linking it to the 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 = "";
    };

My question: How do I refresh the comments list, so that I can see the comment immediatly and that I don't need to refresh my page?

Is $scope.post.comments defined in your controller? And postApi.postComment expects the id argument but I dont see that defined anywhere — logee
– logee, Commented Jun 3, 2016 at 0:03
Yes it's the id of the post of which I comment to (which I get through the params). Everything works fine, I simply need the list to be able to refresh. — Borni
– Borni, Commented Jun 3, 2016 at 0:11

mrbcg · Accepted Answer · 2016-06-03 02:57:13Z

1

Here is a very simple example of it working using your code above. I ripped out the "postApi" call because I wasn't sure if you were using a service/factory/or something else to make your api call.

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 = "";
  };
});

I suggest that if you follow this pattern and your issue remains, then you probably have an error in your api call. If that is the case, your "then" is never firing. Add a catch to your api call and you can easily eliminate that as your problem.

answered Jun 3, 2016 at 2:57

mrbcg

3711 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Borni Over a year ago

Thanks, a good night of sleep cleared up my mind.. I'm using a factory.. and I was adding the res to the comment. but ofcourse I need to add res.data to it.

Borni Over a year ago

One question though, is there a way to do the same but with remove?

Borni Over a year ago

I found it myself through splice & index. Thanks for your assistance

Collectives™ on Stack Overflow

Refresh list when button clicked | Angularjs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related