Wykrywanie zmian w komórkach w angular.js i ng-grid

Question

Zgubiłem swój mózg, ale nie jestem w stanie dowiedzieć się, jak wykryć zmianę danych komórki w ng-grid. W poniższym fragmencie zastosowano zmienną ng, która poprawnie wywołuje metodę save(), ale nie jest to wymagane wywołanie , ponieważ jest wywoływane dla dowolnego wpisu z kluczem. Muszę wiedzieć, kiedy komórka jest kompletna.

Każda pomoc zostanie doceniona.

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

Można utworzyć dyrektywę dotyczącą rozmycia i wywołać funkcję składowania, gdy sygnał wejściowy utraci ostrość.

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

powinien być w stanie wykrywać zdarzenie ngGridEventEndCellEdit:

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

Jest to opisane w nie wiele szczegółów na stronie: https://github.com/angular-ui/ng-grid/wiki/Grid-Events.

Niestety nie odkryłem jeszcze, jak to wydarzenie informuje mnie o tym, który wiersz/komórkę zakończyliśmy edycji, aby można go było zapisać. Ale to może być początek.

Alternatywnie, to pytanie na StackOverflow wydaje się mieć dobrą odpowiedź, która obejmuje dyrektywę ng rozmazaniu: AngularJS and ng-grid - auto save data to the server after a cell was changed

Answer 3

To powinno załatwić sprawę i daje swój pełny edytowanego wiersza, gdy jedna komórka została edytowana . które można następnie zapisać/Aktualizacja

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

Answer 4

mam nadzieję, że to pomoże ktoś. Również potrzebowałem nazwy siatki w zdarzeniu ngGridEventEndCellEdit.

użyciu jquery wewnątrz funkcji:

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

Answer 5

Jeśli używasz siatki UI 3.0 lub 4.x należy odczekać: uiGridEventEndCellEdit

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

Answer 6

Dla UI-siatki 3.0. 6 Użyłem zdarzenia 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 
     } 

     }); 

}