如何删除ng-table中已删除的行

我有一个使用ng-table开发的网格,我需要从服务器端删除后从网格表中删除所选项目.已经尝试再次调用网格加载ajax,但它不起作用.

我的控制器,

app.controller('blockController', function($scope, $filter, $q, ngTableParams, $sce, Block) {

    // Fetch data from server using RESTful API
    $scope.load = function() {
        // load serverside data using http resource service
        Block.get({}, function (response) { // success
                $scope.results = response.data;
                    var data = response.data; // store result to variable

                    // Start ng-table with pagination
                $scope.tableParams = new ngTableParams({
                                page: 1,            // show first page
                                count: 10           // count per page
                }, {
                                total: data.length, // length of data
                                getData: function($defer, params) {
                                        // use build-in angular filter
                                        var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;
                                        orderedData = params.filter() ? $filter('filter')(orderedData, params.filter()) : orderedData;
                                        params.total(orderedData.length); // set total for recalc pagination
                                        $defer.resolve($scope.blocks = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                                }
                    });

                // un-check all check boxes
                $scope.checkboxes = { 'checked': false, items: {} };

                // watch for check all checkbox
                $scope.$watch('checkboxes.checked', function(value) {
                    angular.forEach($scope.blocks, function(item) {
                        if (angular.isDefined(item.id)) {
                            $scope.checkboxes.items[item.id] = value;
                        }
                    });
                });

                // watch for data checkboxes
                $scope.$watch('checkboxes.items', function(values) {
                    if (!$scope.blocks) {
                        return;
                    }
                    var checked = 0, unchecked = 0,
                    total = $scope.blocks.length;
                    angular.forEach($scope.blocks, function(item) {
                        checked   +=  ($scope.checkboxes.items[item.id]) || 0;
                        unchecked += (!$scope.checkboxes.items[item.id]) || 0;
                    });
                    if ((unchecked == 0) || (checked == 0)) {
                        $scope.checkboxes.checked = (checked == total);
                    }
                    // grayed checkbox
                    angular.element(document.getElementById("select_all")).prop("indeterminate", (checked != 0 && unchecked != 0));
                }, true);

                }, function (error) { // error
                    $scope.results = [];
                    // error message display here
                });
    }

    // Call REST API
    $scope.load();

    /*
    |------------------------------
    | Delete selected items
    |------------------------------
    */

    $scope.delete = function() {

        var items = [];
        // loop through all checkboxes
        angular.forEach($scope.blocks, function(item, key) {
            if($scope.checkboxes.items[item.id]) {
                items.push(item.id); // push checked items to array
            }  
        });
        // if at least one item checked
        if(items.length > 0) {
            // confirm delete
            bootbox.confirm("Are you sure to delete this data?", function(result) {
                        if(result==true) {
                            for (var i = 0; i < items.length; i++) {
                                // delete using $http resopurce
                                Block.delete({id: items[i]}, function (response) { // success
                                    // remove the deleted item from grid here
                                    // show message
                        }, function (error) { // error
                                // error message display here
                            });
                            }
                        }
                    }); 
        }
    }; // delete

}); // end controller

HTML表格,

            
            

                

                        

                    
                    
{{$index+1}}
                    
                    

                       
                    
                    
                    

                        {{block.block_name}}
                        

                    
                    
                    

                        {{block.description}}
                        

                    
                    
                    

                        lang->line('label_edit'); ?>
                        lang->line('label_save'); ?>
                    
                        
                
            
 

jvandemo.. 12

一旦服务器确认删除,您应该从数据集中删除已删除的项目.

您可以在删除成功回调中手动执行此操作,而不是仅重新加载完整集合(理论上这也是有效的,但通常会更慢).

然后从集合中删除该项后,调用该tableParams.reload()方法重新加载表,以便更改反映在表中.

您可以reload()在此处找到该方法的工作示例:http://plnkr.co/edit/QXbrbz？p = info

希望有所帮助!