Here is an example plnkr showing how this can be done.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.tableData = [{
"id": "1",
"title": "Question1",
"ManagerComment": "This was a Job Wel Done",
"EmployeeComment": "Wow I am Surprised",
"ParticipantArray": [{
"id": "1",
"comment": "Oh i Dont think So"
}, {
"id": "2",
"comment": "Oh i believe the same"
}
]
}, {
"id": "2",
"title": "Question 2",
"ManagerComment": "This was a Job Wel Done 1",
"EmployeeComment": "Wow I am Surprised 1",
"ParticipantArray": [{
"id": "1",
"comment": "Oh i Dont think So 1"
}
]
}];
$scope.tableDataCopy = angular.copy( $scope.tableData );
$scope.save = function() {
$scope.tableData = angular.copy( $scope.tableDataCopy );
}
});
Basically the controller just contains your data, together with a copy of it so that we do not write directly to the model (hence there would be no need for a save function).
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="data in tableDataCopy">
Manager comment:
<textarea ng-disabled="!edit" ng-model="data.ManagerComment"></textarea>
<br>
Employee comment:
<textarea ng-disabled="!edit" ng-model="data.EmployeeComment"></textarea>
<div ng-repeat="participant in data.ParticipantArray">
Participant {{participant.id}}: <textarea ng-disabled="!edit" ng-model="participant.comment"></textarea>
</div>
<button ng-click="save()">Save</button><button ng-click="edit = !edit">Edit</button>
<br>
<br>
<br>
</div>
{{tableData}}
<br>
<br>
{{tableDataCopy}}
</body>
</html>
This is just a very simple example of how to use repeaters, data binding and click events.
I am sure that you will be able to change the logic according to your specific needs from this example.
Edit: Updated the plnkr with individual controls
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="data in tableDataCopy track by $index">
Manager comment:
<textarea ng-disabled="!editManager" ng-model="data.ManagerComment"></textarea>
<button ng-click="tableData[$index].ManagerComment = data.ManagerComment">Save</button><button ng-click="editManager = !editManager">Edit</button>
<br>
Employee comment:
<textarea ng-disabled="!editEmployee" ng-model="data.EmployeeComment"></textarea>
<button ng-click="tableData[$index].EmployeeComment = data.EmployeeComment">Save</button><button ng-click="editEmployee = !editEmployee">Edit</button>
<div ng-repeat="participant in data.ParticipantArray">
Participant {{participant.id}}: <textarea ng-disabled="!participant.edit" ng-model="participant.comment"></textarea>
<button ng-click="tableData[$parent.$index].ParticipantArray[$index].comment = participant.comment">Save</button><button ng-click="participant.edit = !participant.edit">Edit</button>
</div>
<br>
<br>
<br>
</div>
{{tableData}}
<br>
<br>
{{tableDataCopy}}
</body>
</html>
