CODEWITHSUNDEEP
javascripthtmlangularjs
user2901304
user2901304

Reputation: 713

ng-repeat update after build

I have a list of events that gets build from a JSON call to my server. The list gets parsed through ng-repeat. I want to implement a like button for the event and if its liked, replace that with unlike.

<a ng-show='event.liked==null' ng-click="like(event.event_id)">Like</a>
<a ng-show='event.liked!=null' ng-click="unLike(event.event_id)">Unlike</a>

Everything works perfectly except I have to refresh the feed to show "Unlike". Is there a way I can update the specific list item at the index that was liked once clicked without the need to refresh.

Please let me know if you need more information. Thanks!

edit: adding like function & unlike function. All it does is send request to my server to like or unlike a specific event with the event_id and user token.

$scope.like = function (event_id) {
   var url = www.server.com?type=unlike&event_id=...
    $http.post(url).success(function (data) {
        console.log('success like');
        //I want it to update my index here
    }).error(function (data) {
        console.log('fail like');
    });
};
$scope.unLike = function (event_id) {
    var url = www.server.com?type=unlike&event_id=...
    $http.post(url).success(function (data) {
        console.log('success unlike');
        //I want it to update my index here
    }).error(function (data) {
        console.log('fail unlike');
    });
};

Upvotes: 0

Views: 70

Answers (1)

rtcherry
rtcherry

Reputation: 4880

Instead of passing in the event_id, pass the object to the like and unLike functions and update the object in success handler.

HTML

<a ng-hide='event.liked' ng-click="like(event)">Like</a>
<a ng-show='event.liked' ng-click="unLike(event)">Unlike</a>

Controller

$scope.like = function(event) {
    var url = 'www.server.com?type=unlike&event_id=' + event.event_id;
    $http.post(url).success(function (data) {
        event.liked = true;
        console.log('success like');
    }).error(function (data) {
        console.log('fail like');
    });
};
$scope.unLike = function(event) {
    var url = 'www.server.com?type=unlike&event_id=' + event.event_id;
    $http.post(url).success(function (data) {
        event.liked = null;
        console.log('success unlike');
    }).error(function (data) {
        console.log('fail unlike');
    });
};

Upvotes: 1

Related Questions