AngularJS/ng-lưới - Cập nhật mảng với mối nối không cập nhật UI

Question

Tôi cố gắng để cập nhật ng-grid với mảng splice. Tôi có một số lớn here.

Nút Thêm sẽ thêm hàng mới. Cập nhật nút cập nhật mục cuối cùng trong mảng.

1. Chọn một hàng & nút cập nhật báo chí. Chẳng có gì xảy ra.
2. Nhấn nút thêm. Bây giờ giao diện người dùng được cập nhật với phần tử mới & cũng như phần tử được cập nhật trước đó.
3. Hành vi tương tự được lặp lại một lần nữa & một lần nữa.

Tôi đã thử $scope.$apply. Tôi nhận được:

“Error: $apply already in progress”

Tôi thậm chí đã cố gắng bằng cách đặt $scope.$apply khối bên trong một cuộc gọi setTimeout. Một lần nữa lỗi tương tự!

Bất kỳ con trỏ nào!

Cảm ơn!

Answer 1

Đó là vì dữ liệu $ watcher trong ng-grid (không chính xác) so sánh đối tượng dữ liệu để tham khảo, thay vào đó là đối tượng bình đẳng. Bạn có thể khắc phục điều này bằng cách thiết lập các tham số thứ ba là true trong data $watch function (dòng 3128):

$scope.$parent.$watch(options.data, dataWatcher, true); 

Plunker

Answer 2

CẬP NHẬT (2015-04-10)

góc đã được cải thiện cơ sở mã của họ (1.4.0), trước tiên hãy thử phương pháp $scope.$watchCollection và xem nó có phù hợp với bạn hay không. (Link)

ĐÁP

Nếu bạn không cảm thấy như hack vào một thư viện của bên thứ 3, bạn có thể thêm các hack trong mã của bạn sử dụng:

$scope.updateData = function() { 
    var data = angular.copy($scope.myData); 
    data.splice(data.length - 1, 1, {name: 'UPDATED', age: '4'}) 
    $scope.myData = data; 
}; 

plunkr

Như @Stewie đề cập, vấn đề là vì lý do hiệu suất ngGrid so sánh đối tượng dữ liệu bề ngoài, và trong trường hợp mảng, điều này là do refe rence. ngGrid cũng so sánh với độ dài mảng, vì vậy nếu mảng không thay đổi chiều dài của nó, lưới sẽ không được cập nhật.

Giải pháp này tạo bản sao của mảng (vị trí khác nhau trong bộ nhớ) để khi angularjs $watcher kiểm tra các thay đổi, nó sẽ tìm đối tượng khác và chạy gọi lại cập nhật ngGrid.

LƯU Ý: Vì giải pháp này tạo bản sao của mảng dữ liệu trên mọi cuộc gọi đến updateData, nó có thể dẫn đến vấn đề hiệu suất nếu dữ liệu của bạn quá lớn, Javascript cũng không có bộ sưu tập rác tuyệt vời.

Cũ sai Trả lời:

$timeout(angular.noop, 0);

này chỉ đơn giản là thiết lập một thời gian chờ để kích hoạt một $scope.$apply() sau khi hiện tại được thực hiện. Một cách để kiểm tra bẩn.

Answer 3

Tôi đang sử dụng ui-grid v3.0.0 (từ tháng 4 năm 2015 không ổn định). Tôi thấy bài này và muốn cho người khác làm thế nào tôi làm mới lưới của tôi sau khi tôi lấy ra một hàng từ đối tượng dữ liệu lưới sử dụng mối nối:

// Remove the row and refresh the grid. 
$scope.myData.splice(rowIndex, 1); 
$scope.gridApi.grid.refresh(true); 

nơi biến phạm vi gridApi tôi được thành lập với chức năng này:

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