Question

我正在实施一个心愿单，我想删除心愿单中的内容，而无需刷新页面以查看新数据。这是我做的：

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

          }

}]);

正如您在评论中看到的那样，我尝试了$window.location.reload();，但这就像刷新因为整个页面再次上传而不是删除一个项目 - 如display:none，有没有办法做到这一点？< / p>

修改

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

更新

$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

您的数据集似乎在$scope.wishController上。您需要专门更新此集合并删除已删除的项目：

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

由于您要传递$index，因此您需要使用：

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

Answer 2

您需要在$index上传递ng-click愿望的模板并将其移除到控制器上，如下所示：

在模板上：

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

在控制器上，您需要更改功能才能接收此功能，并从列表模型中删除项目：

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

}

修改

如果您需要使用过滤器，我建议使用this或@charlietfl答案

Answer 3

通常，管理所有这些的最简单方法是将原始对象从视图传递到delClick函数。

如果$index

中使用了任何过滤器，则依赖于使用ng-repeat视图是不安全的

这允许您简单地索引要从中删除它的数组中的该对象。这也意味着您不需要重建要发送到服务器的新对象

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

在控制器中

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

以角度更新数据而不刷新或加载页面

3 个答案: