Sử dụng góc để đánh dấu các phần tử đã sửa đổi trong danh sách

Tôi muốn đồng bộ hóa dữ liệu, do đó tôi có đối tượng dữ liệu chứa trạng thái hiện tại. Khi điều này được thay đổi, tôi muốn thiết lập một thuộc tính trên đối tượng để tôi có thể lọc theo điều này khi đồng bộ hóa. Cấu trúc đối tượng là:Sử dụng góc để đánh dấu các phần tử đã sửa đổi trong danh sách

data = { 
type1: [ 
    {a:"a", b:"b"},... 
] 
type2: [ 
    {c:"c", d:"d"},... 
] 
}

Ví dụ nếu data.type1 [0] .a = "test" sẽ được thực hiện, tôi muốn thêm sửa đổi: đúng đối tượng để nó sẽ là

{a:"test", b:"b", modified:true}

Tôi đã thử $ watch (dữ liệu, hàm(), true) nhưng tôi không thể tìm thấy cách tôi có thể xem đối tượng nào đã được thay đổi và tìm kiếm cả hai đối tượng dữ liệu đã cho. $ watchcollection (khi chỉ tìm kiếm thêm/xóa) cũng không đưa ra chỉ mục.
Có cách nào để tìm ra đối tượng nào đã thay đổi không? Hoặc là có một thư viện khác có thể làm tốt điều này?

Cảm ơn bạn

EDIT:
Tôi tạo ra một jsfiddle: https://jsfiddle.net/yfo8xwah/

Nguồn

2015-07-08 Peter Burkert

'$ pristine' Would góc và 'dirty' công việc $ cho bạn? https://docs.angularjs.org/api/ng/type/form.FormController – Aaron

một cách là có nhưng không hiệu quả như vậy là '$ watch' cung cấp cho bạn' newVal' và 'oldVal' và bạn có thể so sánh cả hai để tìm cái nào đã được thay đổi. – vinayakj

Bạn vui lòng chia sẻ thêm mã không? – Vineet

Mặc dù đây là một workaround ngớ ngẩn nhưng những gì bạn có thể làm là để giữ một phương pháp trong đối tượng dữ liệu như:

data = {type1 : {}, type2 : {}, ... , checkModification : function (field) 
{data[field].modified = true; return data[field];}}

Bây giờ bạn có thể gán bất kỳ đối tượng nào như thế này data.checkModification ('type1'). A = "test" Điều này có thể cho bạn kết quả khả quan.

Nguồn

2015-07-08 18:04:59 binariedMe

Vấn đề là tôi muốn ràng buộc với các thuộc tính –

Tôi nhận được nó .... Tôi hy vọng chỉ định cách vòng khác sẽ không là một vấn đề. Câu hỏi tốt đẹp btw. sẽ chờ đợi một câu trả lời hoàn hảo từ phía ai đó. – binariedMe

Cảm ơn và cảm ơn bạn đã suy nghĩ về điều đó –

Ok, tôi đã làm cho nó hoạt động: https://jsfiddle.net/yfo8xwah/4/.

Trước hết, tôi đã áp dụng trình theo dõi đơn giản trên mô hình data. Bên trong watcher tôi đã sử dụng beautiful library này cho đối tượng so sánh và kết hợp bất kỳ sự khác biệt và tiêm cờ sửa đổi.

Vì vậy, chức năng $ đồng hồ của tôi trông như thế này:

$scope.$watch(function() { 
     return $scope.data; 
    }, function (newD, oldD, scope) { 
     //dont run on init mate ;) 
     if (angular.equals(newD, oldD)) { 
      return; 
     } 
     //now find the differences and apply em 
     var diffs = objectDiff.diffOwnProperties(newD, oldD); 
     console.log(diffs, "diffs"); 

     if (diffs.changed != "equal") { 
      //you should solve this recursively ;) 
      angular.forEach(diffs.value, function (value, key) { 
       if (value.changed != "equal") { 
        angular.forEach(value.value, function (subvalue, subkey) { 
         if (subvalue.changed != "equal") { 
          $scope.data[key][subkey]["modified"] = true; 
         } 
        }); 
       } 
      }); 
     } 

    }, true);

Nguồn

2015-07-08 19:20:31 Theodore

Sau khi xem xét các tùy chọn khác nhau, tôi đã quyết định rằng nó là cần thiết để sử dụng thu khí tùy chỉnh/setters. Điều này là cần thiết vì không có trình xử lý sự kiện thực sự tồn tại và sẽ rất không hiệu quả khi luôn so sánh toàn bộ tập dữ liệu (có thể có vài nghìn phần tử).

Nguồn

2015-09-16 09:13:28

Tôi nghĩ rằng điều này sẽ giúp ......

var app = angular.module('sample', []); 
 
app.controller("MyAppCtrl", function ($scope, $timeout) { 
 
    $scope.data = { 
 
     type1: [{ 
 
      a: "a", 
 
      b: "b" 
 
     }, { 
 
      a: "c", 
 
      b: "d" 
 
     }], 
 
     type2: [{ 
 
      m: 0, 
 
      k: 1 
 
     }, { 
 
      m: 45, 
 
      k: 92 
 
     }] 
 
    } 
 

 
    $scope.$watch('data.type1[0].a', function() { 
 
     console.log('data changed'); 
 
     $scope.data.type1[0].modified = true; 
 
     console.log($scope.data.type1[0]) 
 
    }); 
 

 
});

<body ng-app="sample"> 
 
    <div ng-controller="MyAppCtrl"> 
 
     <input type="text" ng-model="data.type1[0].a"> 
 
     <br> 
 
     <label>{{data.type1[0].a}}</label> 
 
    </div> 
 
</body>

https://jsfiddle.net/basilin/p92Lkn93/

Nguồn

2015-11-27 08:03:34

Hãy thử nó. Bất cứ khi nào đặc biệt đối tượng của sự thay đổi sở hữu bởi đầu vào như textbox

hơn về sự kiện thay đổi vượt qua đối tượng đó để chức năng này như dưới đây:

<input data-ng-model="data.type1.a" type="text" 
     data-ng-change="onChage(data.type1)"/> 
     $scope.onChage = function (object) { 
      object.IsDirty = 'modified'; 
     };

Nguồn

2016-06-27 08:57:45

Sử dụng góc để đánh dấu các phần tử đã sửa đổi trong danh sách

Trả lời

Các vấn đề liên quan