Check out this plnkr link for a demonstration of how to achieve this.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.tableData = [{
"id": "1",
"title": "Question1",
"ManagerComment": "This was a Job Well Done",
"EmployeeComment": "Wow, I am Surprised",
"ParticipantArray": [{
"id": "1",
"comment": "I don't think so"
}, {
"id": "2",
"comment": "I believe the same"
}
]
}, {
"id": "2",
"title": "Question 2",
"ManagerComment": "This was a Job Well Done 1",
"EmployeeComment": "Wow, I am Surprised 1",
"ParticipantArray": [{
"id": "1",
"comment": "I don't think so 1"
}
]
}];
$scope.tableDataCopy = angular.copy( $scope.tableData );
$scope.save = function() {
$scope.tableData = angular.copy( $scope.tableDataCopy );
}
});
The controller manages your data and its copy to avoid direct manipulation of the model (hence the 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="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5f3e31382a333e2d71352c1f6e716b7127">[email protected]</a>" 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 serves as a basic demonstration of repeaters, data binding, and click events.
You can adjust the logic based on your specific requirements using this example as a guide.
Edit: Updated 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="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e0818e87958c8192ce8a93a0d1ced4ce98">[email protected]</a>" 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>