AngularJS - ng-repeat is not updating when adding data

Question

I am trying to update the list of the data by getting it from the database. Each time I'll add a data, it will not update the view, the view will only be updated when I refresh the page. I have tried a few solution by using $scope.apply and rearranging the position of my code, those doesn't make a difference. What am I missing here? Below are my code:

JS

//posting post
$scope.post = function(){
    $http.post('/post',$scope.post_detail)
    .success(function(response){
        $scope.render();
    });
}
//getting post
$scope.render = function(){
    $http.get('/post')
    .success(function(response){
        $scope.renderPost(response);
    });
}
//view post
$scope.renderPost = function(response){
    $scope.posts = response;
}
$scope.remove_post = function(id){
    $http.delete('/post/'+id).success(function(response){
        $scope.render();
    });
}
$scope.render();

HTML

<div class="jumbotron text-center" ng-controller="DashboardCtrl">
    <h1>{{title}}</h1>
    <input type="text" ng-model="post_detail.title" />
    <input type="text" ng-model="post_detail.border_color" />
    <button ng-click="post(post_detail)">Post</button>
</div>
<div ng-repeat="post in posts">
    <p>{{post.title}}</p>
    <button ng-click="remove_post(post._id)">Remove</button>
</div>

Note: The remove button works here

@RIYAJKHAN, Yes i did. It did return the right structure. But still no luck — Gene Lim
– Gene Lim, Commented Aug 10, 2015 at 4:34

Shawn Song · Accepted Answer · 2015-08-10 04:49:29Z

1

Because ng-repeat is outside DashboardCtrl scope. I guess you have a parent controller of the DashboardCtrl div and the posts div and you initiate $scope.posts in the parent controller.

When you have

$scope.renderPost = function(response){
    $scope.posts = response;
}

it updates the posts in the child scope. You probably need to do something like:

$scope.$parent.posts = response;

or move the ng-repeat div inside <div class="jumbotron text-center" ng-controller="DashboardCtrl">...</div>

answered Aug 10, 2015 at 4:49

Shawn Song

3011 silver badge10 bronze badges

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

1 Comment

Gene Lim Over a year ago

This worked! Thank you @Shawn Song, I didn't see that coming.

Dimi Mikadze · Accepted Answer · 2015-08-10 04:26:29Z

1

Because you are updating only database. push newly added post_detail into post object.

//posting post
$scope.post = function(){
    $http.post('/post',$scope.post_detail)
    .success(function(response){
        $scope.post.push($scope.post_detail);
        $scope.render();
    });
}

answered Aug 10, 2015 at 4:26

Dimi Mikadze

4745 silver badges11 bronze badges

1 Comment

Gene Lim Over a year ago

@Dimitry Mikadze, I tried pushing, Still no luck in it.

Gavello · Accepted Answer · 2015-08-10 04:27:12Z

0

I assume your server response to $http.get('/post') is an array of json objects

in that case that array could be nested inside data property

$scope.renderPost = function(response){
    $scope.posts = response.data;
}

answered Aug 10, 2015 at 4:27

Gavello

1,5012 gold badges15 silver badges27 bronze badges

3 Comments

Gene Lim Over a year ago

Yes, it is an array of json objects but it is not a nested json at the moment. Through console.log(response), the data was returned correctly as the GET statement

Gavello Over a year ago

So if you log your response to the console you see your array contents? Are you sure you are not seeing a single object

Gene Lim Over a year ago

When page is loaded:[Object, Object, Object], After posting a new data [Object, Object, Object, Object]. a new object was added. Refreshing the page updates the 4th object

Collectives™ on Stack Overflow

AngularJS - ng-repeat is not updating when adding data

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related