我有一个使用
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 -->