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

前端之家收集整理的这篇文章主要介绍了angularjs – 如何删除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表格,

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

解决方法

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

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

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

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

希望有所帮助!

猜你在找的Angularjs相关文章