updating data in angular without refreshing or loading the page

Question

I'm implementing a wishlist and I would like to delete content from the wishlist without needing to refresh the page in order to see the new data. Here is what I did:

wish.controller('wishCtrl',['$scope','$http','$cookies','$window',function($scope,$http,$cookies,$window) {


    var user={};
    user.email = $cookies.get('cookieEmail');
     $http.get("http://localhost:3000/wishlist/"+user.email).success(function(data){
        $scope.wishController = data; 
        console.log(data);
    });



        var delclick=0;
        var newView =0;

        $scope.delClick = function(title, des, subj) {

        var wish = {};

        wish.user = $cookies.get('cookieEmail');
        wish.sub = subj;
        wish.title = title;
        wish.description=des;

        console.log(wish.user);
        console.log(wish.title);
        console.log(wish.sub);
        console.log(wish.description);

        delclick=1;

        if(delclick==1)
            {
               $http.post('http://localhost:3000/wishlistDel', wish).then()
               //$scope.load();
               //$window.location.reload();
            }

          }

}]);

As you can see in the comments I tried $window.location.reload(); but it's like refreshing because the whole page is uploaded again instead of removing one item - like display:none , is there any way to do that?

edit

        <div ng-repeat="wishlist in wishController.Themes" >
                 <h2 class="text-center">{{wishlist.title}}</h2>
                 <h2 class="text-center">{{wishlist.description}}</h2>
                 <img ng-src="{{wishlist.image}}" class="imgCenter">
                 <button class="w3-btn w3-ripple" ng-click="delClick(wishlist.title, wishlist.description, wishlist.sub, $index)">click </button>
         </div>

update

$http.post('http://localhost:3000/wishlistDel', wish).then(function () {
   if(item.sub=='party'){
    var index = $scope.wishController.Party.indexOf(item);
    console.log(index);
    if(index !== -1){
     $scope.wishController.Party.splice(index,1);
    }
}
    if(item.sub=='activity'){
    var index = $scope.wishController.Activity.indexOf(item);
    console.log(index);
    if(index !== -1){
     $scope.wishController.Activity.splice(index,1);
    }
}
    if(item.sub=='theme'){
    var index = $scope.wishController.Themes.indexOf(item);
    console.log(index);
    if(index !== -1){
     $scope.wishController.Themes.splice(index,1);
    }
}

});

}

Answer 1

It seems like the collection of data you have is on $scope.wishController . You need to update this collection specifically and remove the deleted item:

$http.post('http://localhost:3000/wishlistDel', wish);
$scope.wishController.splice(indexOfDeletedItem, 1);

Since you are passing in $index you would want to use:

$scope.wishController.Themes.splice($index, 1);

Answer 2

You'll need to pass on template the $index of wish on ng-click and remove it on controller, something like this:

On template:

<a ng-click="delClick(title, des, subj, $index)">Delete {{wish.title}}</a>

On controller, you will need to change your function to receive this, and remove item from your list model:

// Here you'll need to receive the $index from template
$scope.delClick = function(title, des, subj, index) {

    // ...

    if(delclick==1) {
        $http.post('http://localhost:3000/wishlistDel', wish).then(function () {
             // Here you'll use the same array of your 
             // ng-repeat instead $scope.list
             $scope.list.splice(index, 1);
        });
    }

}

EDIT

If you need to use filters, I recommend something like this or the @charlietfl answer

Answer 3

Generally the easiest way to manage all of this is pass the original object into your delClick function from the view.

Relying on using $index from view is not safe if any filters are used in ng-repeat

This allows you to simply index that object within array you want to remove it from. It also means you don't need to rebuild new object to send to server

<div ng-repeat="wish in wishlist">
   {{wish.something}}
  <button ng-click="delClick(wish)">Delete</button> 

In controller

$scope.delClick = function(item){
   $http.delete("http://localhost:3000/wishlist/"+user.email +'/' + item.id).then(function(){
     var index = $scope.wishlist.indexOf(item);
     if(index !== -1){
       $scope.wishlist.splice(index,1);
     }
  });    
});