Angular repeat bind to independent objects - angularjs

Question

I have a small Angular application which repeats a list of project objects and allows editing each individual object.
// app.html
<div ng-controller="ProjectsCtrl">
<div ng-repeat="project in projects">
<!-- EDIT -->
<h3>{{ project.id }}</h3>
<h3>{{ project.title }}</h3>
...
<!-- END EDIT -->
<p>
<button class="btn btn-info" ng-click="updateProject(project); showEditProject=true">Edit Project</button>
<button class="btn btn-info" ng-click="showEditProject=false">Cancel</button>
...
</p>
<div class="box row animate-show-hide" ng-show="showEditProject">
<form name="editProjectForm" class="form-horizontal">
<input ng-model="editProject.title" type="text" id="title" name="title" class="form-control" placeholder="Title" required /><br />
...
</form>
</div>
</div>
</div>
// app.js
projectsApp.controller('ProjectsCtrl', function ($scope, $http, ConcernService) {
...
$scope.updateProject = function(obj) {
ConcernService.list('projects/', obj).then(function(){
$scope.editProject = obj;
});
};
This all works fine but as each object is passed on the ng_clickall the editProject objects are bound to the same model. Is it possible to allow the form to open and each object is bound to each project independently?

Answer 1

Your updateProject method in the parent scope is just assigning project to editProject. You can just reference poject in the edit form. There is no need for the editProject field.
// app.html
<div ng-controller="ProjectsCtrl">
<div ng-repeat="project in projects">
<p>
<button class="btn btn-info" ng-click="updateProject(project); showEditProject=true">Edit Project</button>
<button class="btn btn-info" ng-click="showEditProject=false">Cancel</button>
...
</p>
<div class="box row animate-show-hide" ng-show="showEditProject">
<form name="editProjectForm" class="form-horizontal">
<input ng-model="project.title" type="text" id="title" name="title" class="form-control" placeholder="Title" required /><br />
...
</form>
</div>
</div>
</div>
// app.js
projectsApp.controller('ProjectsCtrl', function ($scope, $http, ConcernService) {
...
$scope.updateProject = function(obj) {
ConcernService.list('projects/', obj).then(function(){
$scope.editProject = obj;
});
};

Answer 2

Put the updateProject function in another controller and attach that controller to the div that has the ng-repeat. For example:
projectsApp.controller('ProjectCtrl', funciton($scope, $http, ConcernSerice) {
$scope.updateProject = function(obj) {
ConcernService.list('projects/', obj).then(function(){
$scope.editProject = obj;
});
};
}
and then:
<div ng-repeat="project in projects" ng-controller="ProjectCtrl">
...
</div>
The ng-repeat creates a scope for each project. This will makes it so that when you do $scope.editProject = obj; this will be done on this scope rather than on the single parent scope created by your ProjectsCtrl.
UPDATE:
If you need to be able to reset any edits you made you will need to save a copy of your object. You can probably do this in your updateProject:
$scope.updateProject = function(obj) {
ConcernService.list('projects/', obj).then(function(){
$scope.previousValue = angular.copy(obj);
$scope.editProject = obj;
});
};
Then you would have to create a method for canceling that copies the values back:
$scope.cancel = function(){
$scope.showEditProject = false;
angular.copy($scope.previousValue, $scope.editProject);
};
Then call it from your template:
<button class="btn btn-info" ng-click="cancel()">Cancel</button>