JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app>
<div ng-controller="DemoCtrl">
<div ng-form name="grid">
<button type="submit" data-ng-disabled="changes.length <= 0" ng-click="checkChange()">Save</button>
<div class="no-margin">
<table width="100%" cellspacing="0" class="form table">
<thead class="table-header">
<tr>
<th>ID</th>
<th>Title</th>
</tr>
</thead>
<tbody class="grid">
<tr data-ng-repeat="row in data">
<td>{{ row.contentId }}</td>
<td>
<input type="text" ng-model="row.name" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
JavaScript
function DemoCtrl($scope) {
$scope.data = [{
"contentId": 1234,
"name": "Torry",
"age": 25
}, {
"contentId": 1235,
"name": "Jammie",
"age": 25
}, {
"contentId": 1236,
"name": "Harry",
"age": 25
}, {
"contentId": 1237,
"name": "Larry",
"age": 25
}, {
"contentId": 1238,
"name": "Morrie",
"age": 25
}, {
"contentId": 1239,
"name": "Christy",
"age": 25
}];
$scope.changes = [];
$scope.$watch('data', function(newVal, oldVal){
for(var i = 0; i < oldVal.length; i++){
if(!angular.equals(oldVal[i], newVal[i])){
console.log('changed: ' + oldVal[i].name + ' to ' + newVal[i].name);
var indexOfOld = $scope.indexOfExisting($scope.changes, 'contentId', newVal[i].contentId);
if(indexOfOld >= 0){
$scope.changes.splice(indexOfOld, 1);
}
$scope.changes.push(newVal[i]);
}
}
}, true);
$scope.checkChange = function(){
for(var i = 0; i < $scope.changes.length; i++){
console.log($scope.changes[i].name);
//putEntity($scope.changes[i])
}
$scope.changes = [];
};
$scope.indexOfExisting = function (array, attr, value) {
for(var i = 0; i < array.length; i += 1) {
if(array[i][attr] === value) {
return i;
}
}
};
}