如何在angularjs中从网格中删除行答案

【问题标题】：How to remove row from grid in angularjs如何在angularjs中从网格中删除行
【发布时间】：2015-04-29 08:15:20
【问题描述】：

我正在使用 angularjs。

我正在我的 API 中调用简单的 $http.delete 方法来从网格表中删除行：

我的控制器如下所示：

 $scope.removeRow = function(detail, index){                

       var delRes =  $http.delete($scope.appUrl + detail.id);
        delRes.success(function (data, status, headers, configs) {
            console.log(data);
            delete $scope.appDetails[index].id;
        });
        delRes.error(function (data, status, headers, configs) {
            console.log(data);
        });

    };

现在，API 调用工作正常，但我仍然可以在 UI 的网格中看到记录。当我刷新页面时，我看不到。任何理由。

请帮忙。

【问题讨论】：

标签： angularjs

【解决方案1】：

在我看来，您只是在删除 appDetails 索引行的 id 属性。

尝试删除整个 appDetails[index]。

如果这不是您的问题，您可以在调用之前尝试使用 $scope.$apply() 并进行适当的检查。适用于异步调用。

如果你正在创建一个 AngularJS 服务（例如用于套接字），它在触发回调的任何地方都应该有一个 $scope.$apply()。

$scope.$apply() 应该尽可能靠近异步事件绑定发生可能的。 https://github.com/angular/angular.js/wiki/When-to-use-$scope.$apply()

【讨论】：

【解决方案2】：

您可以使用splice删除选定的索引项

最佳方式

请试试这个

$scope.removeRow = function(detail, index){                

       var delRes =  $http.delete($scope.appUrl + detail.id);
        delRes.success(function (data, status, headers, configs) {
            console.log(data);
           var index = $scope.appDetails.indexOf(detail);
            $scope.appDetails.splice(index, 1);  
        });
        delRes.error(function (data, status, headers, configs) {
            console.log(data);
        });

    };

另一种方法是

重新绑定 |重新加载$scope.appDetails 值

 $scope.removeRow = function(detail, index){              
    
           var delRes =  $http.delete($scope.appUrl + detail.id);
            delRes.success(function (data, status, headers, configs) {
                console.log(data);
              //Rebind the scope value 
              $scope.appDetails=data;// like call the grid load function 
               
            });
            delRes.error(function (data, status, headers, configs) {
                console.log(data);
            });
    
        };

【讨论】：