Phát hiện các thay đổi của tế bào trong angular.js và ng-lưới

Question

Tôi đã gắn bộ não của mình nhưng không thể tìm ra cách phát hiện thay đổi dữ liệu ô trong lưới ng. Đoạn mã sau đang sử dụng ng-thay đổi mà thực hiện đúng cách gọi save(), nhưng nó không phải là kích hoạt Tôi muốn vì nó được gọi cho bất kỳ mục nhập khóa nào. Tôi cần biết khi nào chỉnh sửa ô đã hoàn tất.

Mọi trợ giúp sẽ được đánh giá cao.

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

Bạn có thể tạo chỉ thị mờ và gọi hàm lưu khi dữ liệu đầu vào bị mất tiêu điểm.

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

Bạn sẽ có thể lắng nghe cho sự kiện ngGridEventEndCellEdit:

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

này được mô tả chi tiết không có nhiều tại địa chỉ: https://github.com/angular-ui/ng-grid/wiki/Grid-Events.

Rất tiếc, tôi chưa tìm ra cách sự kiện này cho tôi biết hàng/ô nào chúng tôi đã hoàn tất chỉnh sửa để tôi có thể lưu nó. Nhưng nó có lẽ là một sự khởi đầu.

Ngoài ra, câu hỏi này trên stackoverflow dường như có một câu trả lời tốt có liên quan đến một chỉ thị ng-mờ: AngularJS and ng-grid - auto save data to the server after a cell was changed

Answer 3

này nên làm như lừa, và cung cấp cho bạn hàng thay đổi nội dung hoàn chỉnh của bạn, khi một tế bào đã được chỉnh sửa . Sau đó, bạn có thể lưu/cập nhật

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

Answer 4

tôi hy vọng điều này sẽ giúp ai đó. Tôi cũng cần tên của lưới trong sự kiện ngGridEventEndCellEdit.

sử dụng jquery bên trong hàm:

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

Answer 5

Nếu bạn đang sử dụng giao diện người dùng Lưới 3,0 HOẶC 4.x bạn nên chờ đợi: uiGridEventEndCellEdit

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

Answer 6

Đối ui-grid 3.0. 6 Tôi đã sử dụng sự kiện 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 
     } 

     }); 

}