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

Question

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

我的 Controller ,

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 表格，

            <!-- data table grid -->
            <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" ng-table="tableParams" show-filter="true">
                <tbody>
                        <tr ng-repeat="block in $data">
                    <!-- serial number -->
                    <td data-title="'<?php echo $this->lang->line('sno'); ?>'" style="text-align:center" width="4">{{$index+1}}</td>
                    <!-- Checkbox -->
                    <td data-title="''"  class="center" header="'ng-table/headers/checkbox.html'" width="4">
                       <input type="checkbox" ng-model="checkboxes.items[block.id]" />
                    </td>
                    <!-- Block Name -->
                    <td data-title="'<?php echo $this->lang->line('label_cluster_name'); ?>'" sortable="'block_name'" filter="{ 'block_name': 'text' }">
                        <span ng-if="!block.$edit">{{block.block_name}}</span>
                        <div ng-if="block.$edit"><input class="form-control" type="text" ng-model="block.block_name" /></div>
                    </td>
                    <!-- Description -->
                    <td data-title="'<?php echo $this->lang->line('label_description'); ?>'" sortable="'description'" >
                        <span ng-if="!block.$edit">{{block.description}}</span>
                        <div ng-if="block.$edit"><textarea class="form-control" ng-model="block.description"></textarea></div>
                    </td>
                    <!-- Edit / Save button -->
                    <td data-title="'<?php echo $this->lang->line('label_actions'); ?>'" width="6" style="text-align:center">
                        <a ng-if="!block.$edit" href="" class="btn btn-inverse btn-sm" ng-click="block.$edit = true"><?php echo $this->lang->line('label_edit'); ?></a>
                        <a ng-if="block.$edit" href="" class="btn btn-green btn-sm" ng-click="block.$edit = false;update(block)"><?php echo $this->lang->line('label_save'); ?></a>
                    </td>
                        </tr>
                </tbody>
            </table> <!-- table grid -->

Answer 1

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

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

然后从集合中删除项目后，调用 tableParams.reload()方法重新加载表，以便更改反射(reflect)在表中。

您可以找到 reload() 的工作示例。方法在这里:http://plnkr.co/edit/QXbrbz?p=info

希望有帮助!