Come posso fare clic su un pulsante in una tabella di griglia ng eliminare una riga dal modello?

Question

Ho installato il seguente con ng-grid:

var gridData = {}; 
    $scope.gridOptions = { 
     data: 'gridData', 
     enableCellEdit: true, 
     multiSelect: false, 
     columnDefs: [ 
      { field: 'testId', displayName: 'Test Id' }, 
      { field: 'name', displayName: 'Name', enableCellEdit: true, editableCellTemplate: cellEditableTemplate }, 
      { field: 'description', displayName: 'Description', enableCellEdit: true, editableCellTemplate: cellEditableTemplate }, 
      { field: '', cellTemplate: '<button ng-click="delete(row)">Delete</button>' } 
     ] 
    }; 

e:

$scope.delete = function (row) { 
     row.entity.$deleteData({ testId: row.entity.testId }); 
    } 

Questo invia un messaggio HTTP al server che cancella la riga. Tuttavia la riga rimane ancora nella griglia. Come posso fare in modo che il clic del pulsante Elimina su una riga cancelli anche una riga dall'oggetto gridData?

Answer 1

Come Valentyn Shybanov menzionato nel suo commento, è necessario verificare se il server ha eliminato correttamente l'oggetto nel database e quindi rimuoverlo dall'array gridData.

$scope.delete = function(row) { 
    row.entity.$deleteData({testId:row.entity.testId}) 
     .then(function(response) { 
      if (response.status === 'OK') { 
       remove($scope.gridData, 'testId', row.entity.testId); 
      } 
     }); 
} 

// parse the gridData array to find the object with testId 
function remove(array, property, value) { 
    $.each(array, function(index, result) { 
     if (result[property] == value) { 
      array.splice(index, 1); 
     } 
    });  
}); 

"Rimuovi funzione" è stata presa da: https://stackoverflow.com/a/6310763/1036025

Answer 2

Ecco un Plunker per l'ultima versione (3.0.0rc20) di ui-grid per fare un pulsante specifico fila (cioè modificare, cancellare, ecc) :

http://plnkr.co/edit/l7oOIe4w3XzKOnMUGDdr?p=preview

var app = angular.module('plunker', ['ui.grid']); 

app.controller('MainCtrl', function($scope) { 

    $scope.gridScope = $scope; 

    $scope.gridOptions = { 
    data: [{ 
     firstName: 'Frank', 
     lastName: 'Zappa' 
    }, { 
     firstName: 'Giuseppe', 
     lastName: 'Verdi' 
    }, { 
     firstName: 'Mos', 
     lastName: 'Def' 
    }], 
    columnDefs: [{ 
     field: 'firstName', 
     displayName: 'First' 
    }, { 
     field: 'lastName', 
     displayName: 'Last' 
    }, { 
     field: 'edit', 
     cellTemplate: '<button id="editBtn" type="button" class="btn-small glyphicon glyphicon-pencil" ng-click="grid.appScope.editUser(row.entity)" ></button> ' 
    }] 
    }; 

    $scope.editUser = function(data) { 
    alert('Edit ' + data.firstName + ' ' + data.lastName); 
    } 
}); 

Si utilizza solo Bootstrap per il pulsante glifo. Altrimenti puoi semplicemente usare Angular con ui-grid.

Questo è basato su una nota importante nella README aggiornamento per ui-grid:

https://github.com/angular-ui/ng-grid/blob/master/3.0_UPGRADE.md

Sembra che essi hanno migliorato sul molto confuso (almeno per me!) "GetExternalScopes()" roba precedentemente utilizzata per farlo funzionare.