Question

我有一个小的Angular应用程序，它重复了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函数放在另一个控制器中，并将该控制器附加到具有ng-repeat的div。例如：

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创建的单一父范围内完成。

<强>更新

如果您需要重置所做的任何编辑，则需要保存对象的副本。您可以在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>

Answer 2

父作用域中的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;
        });
    };

角度重复绑定到独立对象

2 个答案: