JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/NV/objectDiff.js/gh-pages/objectDiff.js"></script>
<div ng-app="myApp" ng-controller="MyAppCtrl as mac"> <pre>
{{data | json}}
</pre>
</div>
CSS
pre {
display: block;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.428571429;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
white-space: pre-wrap;
}
JavaScript
angular.module("myApp", [])
.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
}]
}
console.log($scope.data);
$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") {
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);
$timeout(function () {
console.log("pushing");
$scope.data.type1.push({
a: "kjh",
b: "kjk"
});
}, 2000);
$timeout(function () {
console.log("changing");
$scope.data.type1[0].a = "yeah";
}, 4000);
$timeout(function () {
console.log("appending");
$scope.data.type2[0].a = "yeah x2";
}, 5000);
$timeout(function () {
console.log("I rock babes");
$scope.data.type2[1].a = "yeah x3";
}, 6000);
$timeout(function () {
console.log("Push the last one");
$scope.data.type2.push({
a: "uber Yeah!",
b: "kjk"
});
}, 7000);
});