Rilevamento delle modifiche delle celle in angular.js e ng-grid

Question

Mi sono tormentato ma non riesco a capire come rilevare la modifica dei dati delle celle in ng-grid. Il seguente snippet sta usando ng-change che chiama correttamente save(), ma non è il trigger che desidera poiché viene chiamato per qualsiasi voce con chiave. Devo sapere quando la modifica di la cella è completa.

Qualsiasi aiuto sarebbe apprezzato.

angular.module('controllers', ['ngGrid']). 
controller('ContactsListCtrl', ['$scope', 'Contacts', function ($scope, Contacts) { 
    var editableCellTemplate = '<input type="text" ng-class="\'colt\' + col.index" ng-input="COL_FIELD" ng-model="COL_FIELD" ng-change="save()"/>'; 

    Contacts.get(function(data) { 
     $scope.contacts = data; 

    }); 
    $scope.gridOptions = { 
     data: 'contacts', 
     enableCellSelection: true, 
     enableRowSelection: false, 
     enableCellEdit: true, 
     showSelectionCheckbox: true, 
     columnDefs: [ 
      {field: 'lastName', displayName: 'Last Name', enableCellEdit: true, editableCellTemplate: editableCellTemplate}, 
      {field: 'firstName', displayName: 'First Name', enableCellEdit: true, editableCellTemplate: editableCellTemplate}, 
      {field: 'email', displayName: 'EMail Address', enableCellEdit: true, editableCellTemplate: editableCellTemplate}, 
      {field: 'phone', displayName: 'Phone', enableCellEdit: true, editableCellTemplate: editableCellTemplate} 
     ] 
    }; 
    $scope.save = function() { 
     $scope.contact = this.row.entity; 
     Contacts.save($scope.contact); 
    } 
}]); 

Answer 1

Si potrebbe creare una direttiva sfocatura e chiamare la funzione di salvataggio quando l'ingresso perde lo stato attivo.

app.directive('ngBlur', ['$parse', function($parse) { 
    return function(scope, element, attr) { 
    var fn = $parse(attr['ngBlur']); 
    element.bind('blur', function(event) { 
     scope.$apply(function() { 
     fn(scope, {$event:event}); 
     }); 
    }); 
    } 
}]); 

Answer 2

Si dovrebbe essere in grado di ascoltare l'evento ngGridEventEndCellEdit:

$scope.$on('ngGridEventEndCellEdit', function(data) { 
    console.log(data); 
}); 

Questo è descritto in non molto dettaglio: https://github.com/angular-ui/ng-grid/wiki/Grid-Events.

Purtroppo non ho ancora capito come questo evento mi indichi quale riga/cella abbiamo finito di modificare, in modo da poterla salvare. Ma forse è un inizio.

In alternativa, questa domanda su StackOverflow sembra avere una buona risposta che coinvolge una direttiva ng-sfocatura: AngularJS and ng-grid - auto save data to the server after a cell was changed

Answer 3

Questo dovrebbe fare il trucco, e vi darà la vostra fila completa cura, quando è stato modificato una cella di . che è quindi possibile salvare/aggiornamento

$scope.$on('ngGridEventEndCellEdit', function(event) { 
    $scope.contact = event.targetScope.row.entity; 
    Contacts.save($scope.contact); 
    // console.log($scope.contact); 
}); 

Answer 4

Spero che questo vi aiuterà qualcuno. Anch'io avevo bisogno del nome della griglia nell'evento ngGridEventEndCellEdit.

utilizzando jQuery all'interno della funzione:

$scope.$on('ngGridEventEndCellEdit', function (data) { 
var gridName = $('.' + data.targetScope.gridId).attr('ng-grid'); 
}); 

Answer 5

Se stai usando UI Griglia 3.0 o 4.x si deve attendere: uiGridEventEndCellEdit

$scope.$on('uiGridEventEndCellEdit', function (data) { 
    console.log(data.targetScope.row.entity); 
}); 

Answer 6

Per ui-grid 3.0. 6 Ho usato l'evento afterCellEdit.

$scope.gridOptions.onRegisterApi = function (gridApi) { 
     $scope.gridApi = gridApi; 

     gridApi.edit.on.afterCellEdit($scope,function(rowEntity, colDef,newValue,oldValue){ 

     if(newValue != oldValue){ 
      // Do something....... 
      // colDef.field has the name of the column that you are editing 
     } 

     }); 

}