web-dev-qa-db-fra.com

Angular JS UI-Grid Delete Row

Je suis nouvelle ui-grid et j'essaie d'implémenter une table dans AngularJS comme indiqué dans l'image ci-dessous. J'essaie de sélectionner une ligne et de la supprimer à l'aide d'un bouton de suppression sur cette ligne particulière. Le ui-grid la documentation nous oblige à utiliser le gridApi mais je ne trouve pas de documentation suffisante pour le même.

enter image description here

angularjsangular-ui-grid
12
Sur

Veuillez voir un exemple pratique de la façon de supprimer une ligne ici. http://plnkr.co/edit/6TiFC6plEMJMD4U6QmyS?p=preview

La clé est d'utiliser indexOf(row.entity) et de ne pas compter sur row.index car il n'est pas mis à jour dynamiquement.

$scope.deleteRow = function(row) {
  var index = $scope.gridOptions.data.indexOf(row.entity);
  $scope.gridOptions.data.splice(index, 1);
};

Approche générique

function deleteRow(row,grid) {
   var i = grid.options.data.indexOf(row.entity);
   grid.options.data.splice(i, 1);
}
17
Blowsie

Vous pouvez utiliser la solution @Blousie dans la mesure où vous l'adaptez à la nouvelle API: https://github.com/angular-ui/ng-grid/blob/master/3.0_UPGRADE.md

Maintenant "grid.appScope.edit (row.entity)" vous donne accès à la fonction "edit" de votre portée.

Quelque chose comme ça:

var removeTemplate = '<button class="btn btn-danger" ng-click="grid.appScope.removeRow(row)"><i class="glyphicon glyphicon-remove"></i></button>';

$scope.removeRow = function(row) {
    var index = $scope.<yourDataModelProperty>.indexOf(row.entity);
    if (index !== -1) {
        $scope.<yourDataModelProperty>.splice(index, 1);
    }
};
4
Diego Pamio

Les autres solutions fournies ici n'ont pas fonctionné pour moi (peut-être à cause de ma dernière version différente de ui-grid). Donc, supprimer un élément du tableau de portée a fonctionné pour moi. Cela devrait même fonctionner avec d'autres versions de ui-grid car la grille doit être mise à jour lorsque les données changent. (Merci à Angular !!!)

J'utilise lodash pour supprimer l'élément du tableau et voici un exemple de code:

$scope.deleteRow = function(row){
    _.remove($scope.gridData, {
        id: row.id
    });
};
3
vinesh

Nous devons utiliser $ scope.grid.appScope. Il est disponible dans tous les modèles. En plus de cela, vous devez envoyer l'objet de ligne à partir du modèle, afin de pouvoir supprimer la ligne des données de la grille.

jsfiddle: http://jsfiddle.net/3ryLqa9e/4/

  cellTemplate:'<button class="btn primary" ng-click="grid.appScope.Delete(row)">Delete Me</button>' 

  $scope.Delete = function(row) {
            var index = $scope.gridOptions.data.indexOf(row.entity);
            $scope.gridOptions.data.splice(index, 1);
        };
3
Razan Paul

Supprimez simplement la ligne que vous souhaitez supprimer du modèle de source de données ui-grids à l'aide de l'épissure.

Par exemple

$scope.myGridOptions.data.splice(<YOUR ROW INDEX HERE>, 1);
2
Thanos