Как получить измененные предметы с помощью угловых $ watch или $ watchCollection

Question

Я хотел бы отслеживать изменения элементов в массиве. см. образец here:

angular.module('watchApp', []).controller('watchCtrl', function($scope) { 
$scope.items = [ 
    {value: 1}, 
    {value: 2}, 
    {value: 3} 
]; 

$scope.newItems = []; 
$scope.deleteItems = []; 
$scope.modifiedItems = []; 
$scope.$watchCollection('items', function(newVal, oldVal) { 
    console.log(newVal); 
    console.log(oldVal); 
    for(var i=0; i<newVal.length; i++) { 
     if (oldVal.indexOf(newVal[i])<0) { 
      $scope.newItems.push(newVal[i]); 
     } 
    } 
    for(var i=0; i<oldVal.length; i++) { 
     if (newVal.indexOf(oldVal[i])<0) { 
      $scope.deleteItems.push(oldVal[i]); 
     } 
    } 
}); 
$scope.addOne = function() { 
    $scope.items.push({value:$scope.items.length+1}); 
}; 
$scope.remove = function (it) { 
    $scope.items.splice($scope.items.indexOf(it), 1); 
}; 

});

Теперь я могу отслеживать новые добавленные и удаленные элементы с последней версией (1.5.0) угловой. Однако я не знаю, как получить измененные элементы в массиве. Просто используйте $watch('items', function..., true) не работает. который сделает все элементы как новые, а все старые элементы удалены, в том числе без изменений.

Answer 1

Внутри вашей функции $watchCollection вам необходимо рассчитать разницу между двумя версиями вашего массива. Я рекомендую использовать для этого lodash. Для проверки того, был ли элемент удален или добавлен, я сравниваю длины newValue и oldValue.

$scope.$watchCollection('items', function (newValue, oldValue) { 
    if (newValue.length > oldValue.length) { 
     console.log(_.difference(newValue, oldValue)); 
    } else { 
     console.log(_.difference(oldValue, newValue)); 
    } 
}); 

Проверьте это JSFiddle для простой демонстрации.

Если вы не хотите использовать lodash, вам нужно будет сравнить два массива вручную.