Угловое повторное связывание с независимыми объектами

Question

У меня есть небольшое угловое приложение, которое повторяет список объектов project и позволяет редактировать каждый отдельный объект.

// 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; 
     }); 
    }; 

Это все работает отлично, но так как каждый объект передается на ng_clickвсе на editProject объекты связаны с одной и той же модели. Можно ли разрешить форму открываться, и каждый объект привязан к каждому project независимо?

Answer 1

Ваш метод updateProject в родительской области присваивает только project до editProject. Вы можете просто ссылаться на poject в форме редактирования. В поле editProject нет необходимости.

// 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

Поместите функцию updateProject в другой контроллер и прикрепите этот контроллер к div, который имеет ng-repeat. Например:

projectsApp.controller('ProjectCtrl', funciton($scope, $http, ConcernSerice) { 
    $scope.updateProject = function(obj) { 
     ConcernService.list('projects/', obj).then(function(){ 
      $scope.editProject = obj; 
     }); 
    }; 
} 

, а затем:

<div ng-repeat="project in projects" ng-controller="ProjectCtrl"> 
... 
</div> 

ng-repeat создает возможности для каждого проекта. Это сделает так, что когда вы сделаете $scope.editProject = obj;, это будет сделано в этой области, а не в единственной родительской области, созданной вашим ProjectsCtrl.

UPDATE:

Если вы должны быть в состоянии восстановить любые изменения, внесенные вам нужно сохранить копию объекта. Вы, вероятно, может сделать это в updateProject:

$scope.updateProject = function(obj) { 
     ConcernService.list('projects/', obj).then(function(){ 
      $scope.previousValue = angular.copy(obj); 
      $scope.editProject = obj; 
     }); 
    }; 

Тогда вы должны создать метод для отмены, который копирует значения обратно:

$scope.cancel = function(){ 
    $scope.showEditProject = false; 
    angular.copy($scope.previousValue, $scope.editProject); 
}; 

Затем вызовите его из шаблона:

<button class="btn btn-info" ng-click="cancel()">Cancel</button>