angularjs - angular.js と ng-grid でセルの変更を検出する

Question

頭を悩ませましたが、ng-grid でセルデータの変更を検出する方法がわかりません。次のスニペットは、save() を正しく呼び出す ng-change を使用していますが、キー付きエントリに対して呼び出されるため、必要なトリガーではありません。セルの編集がいつ完了するかを知る必要があります。

どんな助けでも大歓迎です。

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);
    }
}]);

score 5 · Accepted Answer

これでうまくいき、セルが編集されたときに完全に編集された行が得られます。その後、保存/更新できます

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

score 5 · Accepted Answer

UI Grid 3.0 または 4.x を使用している場合は、待つ必要があります: uiGridEventEndCellEdit

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

score 1 · Accepted Answer

これが誰かを助けることを願っています。私も ngGridEventEndCellEdit イベントでグリッドの名前が必要でした。

関数内でjqueryを使用：

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

score 0 · Accepted Answer

ui-grid 3.0.6 では、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
        }

      });

}

angularjs - angular.js と ng-grid でセルの変更を検出する

6 に答える 6

Related

Reference