在不刷新或加载页面的情况下更新 Angular 中的数据

updating data in angular without refreshing or loading the page

本文关键字：情况下 更新 数据 Angular 刷新 加载      更新时间：2023-09-26

>我正在实施一个愿望清单，我想从愿望清单中删除内容，而无需刷新页面即可查看新数据。这是我所做的：

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一样，有什么办法可以做到这一点吗？

编辑

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

}

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

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

由于您正在传入$index因此您需要使用：

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

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

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

这允许您简单地为要从中删除的数组中的对象编制索引。这也意味着您无需重建新对象即可发送到服务器

<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);
     }
  });    
});
您需要

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

在模板上：

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

编辑

如果您需要使用过滤器，我建议您使用类似的东西或@charlietfl答案

相关文章：