Comment faire pour supprimer ligne supprimée en ng-table
J'ai une grille élaborée à l'aide de ng-table et j'ai besoin de supprimer l'élément sélectionné à partir de la grille de la table après l'avoir retiré du côté serveur. Déjà essayé d'appeler la grille de chargement ajax de nouveau, mais cela ne fonctionne pas.
Mon Contrôleur,
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
Tableau 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 -->
OriginalL'auteur devo | 2014-01-07
Vous devez vous connecter pour publier un commentaire.
Vous devez supprimer l'élément supprimé de la collecte de données une fois que le serveur de confirmer la suppression.
Vous pouvez le faire manuellement à partir de l'intérieur de la suppression de la réussite de rappel au lieu de simplement recharger la collection complète (ce qui est théoriquement valide, mais sera souvent plus lent).
Puis après le retrait de l'élément de la collection, appelez le
tableParams.reload()
méthode pour recharger la table de sorte que le changement est reflété dans le tableau.Vous pouvez trouver un exemple de travail de la
reload()
méthode ici: http://plnkr.co/edit/QXbrbz?p=infoEspère que ça aide!
Veuillez onec regarder ma question stackoverflow.com/questions/37589187/...
OriginalL'auteur jvandemo
C'est de travailler pour moi:
OriginalL'auteur Aqib Mumtaz
Dans la version 1x de ng-table le code suivant fonctionne. Dans cet exemple, je suis en utilisant le
MyController as vm
approche etuser
est un $ressource objet de classe:Lorsqu'il est appelé dans votre tableau HTML, assurez-vous de passer en $index comme deuxième paramètre, par exemple:
Pas besoin d'appeler tableParams.de recharger ou de récupérer les données à partir du serveur.
OriginalL'auteur Yaron