How to remove deleted row in ng-table

Question

I have a grid developed using ng-table and I need to remove selected item from grid table after removing from server-side. Already tried to call the grid loading ajax again, but it's not working.

My 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 Table,

            <!-- 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 -->

Solution 1

You should remove the deleted item from the data collection once the server confirms the deletion.

You can do this manually from within the delete success callback instead of just reloading the complete collection (which is theoretically valid as well but will often be slower).

Then after removing the item from the collection, call the tableParams.reload() method to reload the table so the change is reflected in the table.

You can find a working example of the reload() method right here: http://plnkr.co/edit/QXbrbz?p=info

Hope that helps!

Solution 2

This is working for me:

    $scope.deleteEntity = function (entity) {
    bootbox.confirm("Are you sure you want to delete this entity ?", function (confirmation) {
            if (confirmation) {
                $http.delete("/url/" + entity._id)
                    .success(function (data) {
                        if (data.status == 1) {
                            var index = _.indexOf($scope.data, entity);
                            $scope.data.splice(index, 1);
                            $scope.tableParams.reload();
                        } else {
                        }
                    });
            }
        }
    );
};