javascript - updating data in angular without refreshing or loading the page - Stack Overflow

I'm implementing a wishlist and I would like to delete content from the wishlist without needing t

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

});

}

Share Improve this question edited Jul 13, 2016 at 15:50 user3488862 asked Jul 13, 2016 at 13:59 user3488862user3488862 1,3592 gold badges12 silver badges18 bronze badges 3
  • 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
Add a ment  | 

3 Answers 3

Reset to default 4

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

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1744187751a4562287.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信