Javascript 在不刷新或加载页面的情况下以角度更新数据

我正在实现一个愿望列表，我想从愿望列表中删除内容，而无需刷新页面以查看新数据。 以下是我所做的：

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的评论中所看到的；但这就像刷新一样，因为整个页面会再次上传，而不是删除一个类似显示的项目：无，有什么方法可以做到这一点吗

编辑

---

}

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

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

由于您正在传入$index，因此您希望使用：

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

---

看起来您收集的数据位于$scope.wishController上。您需要专门更新此集合并删除已删除的项目：

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

由于您正在传入$index，因此您希望使用：

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

---

您需要在ng click上传递wish的$index模板，并在controller上删除它，如下所示：

在模板上：

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

编辑

---

如果您需要使用过滤器，我建议您使用类似于或@charlietfl answer的模板，您需要在ng单击时传递$wish index，然后在控制器上删除它，类似于以下内容：

在模板上：

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

编辑

---

如果您需要使用过滤器，我建议使用类似于或@charlietfl answer的方法。通常，管理所有这些的最简单方法是从视图中将原始对象传递到delClick函数中

如果在ng repeat中使用任何筛选器，则依赖于从视图使用$index是不安全的

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

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

---

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

如果在ng repeat中使用任何筛选器，则依赖于从视图使用$index是不安全的

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

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

---

---

我只是在写同样的答案！太慢建议在请求成功时进行拼接though@charlietfl不一定；我更喜欢立即反映删除，而不是等待服务器。如果出现服务器/删除错误，它可能会还原该项，但是。对，需要存储副本，然后在视图中回滚though@ExplosionPills因此，我的函数需要返回已删除项的索引，该索引将在splice中发送？我只是在写相同的答案！太慢建议在请求成功时进行拼接though@charlietfl不一定；我更喜欢立即反映删除，而不是等待服务器。但是，如果出现服务器/删除错误，它可能会还原项目。对，将需要存储副本以便在视图中回滚though@ExplosionPills因此，my函数需要返回已删除项目的索引，该索引将在splice中发送？可以通过从视图中传入原始对象来简化此操作吗？设置delclick=1的目的是什么；然后立即测试ifdelclick==1？在ng click上添加$index，但不在函数中。可以通过从视图中传入原始对象来简化此过程设置delclick=1的目的是什么；然后立即测试ifdelclick==1？在ng click上添加$index，但不在函数中添加。强烈建议不要使用$index，而是自己创建索引。如果ng repeat中使用了任何筛选器，那么$index将是筛选数组的索引而不是主索引，并将最终删除错误的项将$index放置在何处？$index是ng repeat中的一个变量，并且angular设置了它，您不需要任何操作来设置，如果你想使用@charlietfl所说的过滤器，你需要使用类似的东西，强烈建议不要使用$index，而是自己做索引。如果ng repeat中使用了任何筛选器，那么$index将是筛选数组的索引而不是主索引，并将最终删除错误的项将$index放置在何处？$index是ng repeat中的一个变量，并且angular设置了它，您不需要任何操作来设置，如果您想使用@charlietfl所说的过滤器，您需要使用类似以下内容*$scope.wishlist.spliceindex，1@charlietfl我不能使用我的post函数？它必须被删除？是的，你可以。。。使用delete是Restful方法。服务器然后只检查在同一个服务器上使用的方法url@charlietfl我更新了-这就是你的意思？它对我仍然不起作用…@charlietfl自动删除，无需刷新*$scope.wishlist.stipleindex，1@charlietfl我不能使用我的post函数？它必须被删除？是的，你可以。。。使用delete是Restful方法。服务器然后只检查在同一个服务器上使用的方法url@charlietfl我更新了它-

---

这就是你的意思？它对我仍然不起作用…@charlietfl自动删除而不需要刷新