JSFiddle - React, Tailwind, and code Playground

by DotDotDot

HTML

<div ng-app='tt'>
<div ng-controller='soCtrl'>
<div ng-form name="grid">
      <button type="submit" data-ng-disabled="grid.$pristine">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="data[$index].title" ng-change="notifyChange($index)"/></td>
                    </tr>
                </tbody>
            </table>
        </div>
		<input type='button' ng-click='putEntity()' value="Submit">
</div>
</div>
</div>

CSS

</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<style>

JavaScript

var tt=angular.module('tt',[]);
tt.controller('soCtrl', function($scope){
	$scope.data=[{"title":"title1", "contentId":"content1"},
	{"title":"title2", "contentId":"content2"},
	{"title":"title3", "contentId":"content3"},
	{"title":"title4", "contentId":"content4"}];
	$scope.dataBackup=angular.copy($scope.data);
	$scope.modified=Array();
	$scope.notifyChange=function(inde){//will be triggered on each change, 
		if($scope.modified.indexOf(inde)==-1)
			{
			console.log("added",inde)
			$scope.modified.push(inde)//if we modified something, we add the index to be sent later
			}
		else{
			console.log("else")//already exist
		}
	}
	$scope.putEntity=function(){
	var f=""
		for( t in $scope.modified){
			realId=$scope.modified[t]
			if($scope.data[realId].title!=$scope.dataBackup[realId].title)//only if the content really changed
				f+="would have added "+$scope.data[realId].contentId+" : "+$scope.data[realId].title+"\n"
		}
	alert(f);
	}
});