Detektieren von Zellenänderungen in angular.js und ng-grid

Question

Ich habe mein Gehirn gepackt, bin aber nicht in der Lage, herauszufinden, wie man die Zelldatenänderung in ng-grid erkennen kann. Das folgende Snippet verwendet ng-change, das save() korrekt aufruft, aber es ist nicht der Trigger, den ich möchte, da er für jeden verschlüsselten Eintrag aufgerufen wird. Ich muss wissen, wann die Bearbeitung von der Zelle abgeschlossen ist.

Jede Hilfe wäre willkommen.

Answer 1

Sie könnten eine Unschärfeanweisung erstellen und die Speicherfunktion aufrufen, wenn die Eingabe den Fokus verliert.

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

Sie sollten für das ngGridEventEndCellEdit Ereignis zu hören fähig sein: https://github.com/angular-ui/ng-grid/wiki/Grid-Events:

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

Dies ist in nicht sehr ins Detail zu beschrieben.

Leider habe ich noch nicht herausgefunden, wie dieses Ereignis mir sagt, welche Zeile/Zelle wir bearbeitet haben, damit ich es speichern kann. Aber es ist vielleicht ein Anfang.

Alternativ kann diese Frage auf Stackoverflow scheint eine gute Antwort zu haben, die eine ng-Blur-Richtlinie beinhaltet: AngularJS and ng-grid - auto save data to the server after a cell was changed

Answer 3

Dies sollte es tun, und geben Sie Ihre vollständige bearbeitete Reihe, wenn man die Zelle bearbeitet wurde . die Sie dann speichern kann/update

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

Answer 4

Ich hoffe, das jemand helfen. Ich benötigte auch den Namen des Gitters im ngGridEventEndCellEdit-Ereignis.

mit Jquery in der Funktion:

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

Answer 5

Wenn Sie UI Grid verwenden 3.0 oder 4.x sollten Sie warten: uiGridEventEndCellEdit

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

Answer 6

Für ui-Grid 3.0. 6 Ich habe das Ereignis afterCellEdit verwendet.

$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 
     } 

     }); 

}