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 ments 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);
    }
}

});

}

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 ments 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);
    }
}

});

}

• javascript
• angularjs
• ajax

• Can sure simplify this by passing in your original object from the view – charlietfl Commented Jul 13, 2016 at 14:05
• What is the purpose of setting delclick=1; and then immediately testing if(delclick==1)? – Lex Commented Jul 13, 2016 at 14:11
• You add $index on ng-click, but not in your function.. – rneves Commented Jul 13, 2016 at 14:55

3 Answers 3

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

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

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 remend something like this or the @charlietfl answer