Question

我有一个表单，用于编辑附加在DOM上的根目录附近的项目。我的页面包含这些项目的列表，以及编辑它们的链接。

最干净的方法是什么？

单击其编辑链接时在表单中显示所选项目
让表单在项目副本上运行，以便在用户编辑时不会修改原件（并且可以取消更改）
保存表单会更新原始项目

我一直在使用$ rootScope，指令和服务的各种组合，但还没有一个可行的解决方案，请使用干净的解决方案。

Answer 1

您可以首先使用指向具有与您正在编辑的属性相同属性的对象的ngModel绑定来设置表单。因此，使用下面的对象，请使用ng-model='editObj.name'的文本字段。

如果有关这些项目的所有信息都存储在JSON对象中，您只需选择该项目的一部分：

[
    {
        "name":"Tim",
        "country":"USA"
    },
    {
        "name":"second",
        "country":"CA"
    }
]

然后将第二项转移到新范围obj：

$scope.editObjItem=angular.copy($scope.obj[1]);

然后您可以编辑它的地狱，然后在单击提交按钮时将其弹回原位，然后您可以根据需要将数据上传回服务器：

$scope.obj[1]=$scope.editObjItem;

如果用户在进行更改后取消编辑，则不会对原始对象造成伤害。这就是我无论如何都要处理它。

Answer 2

这是一个由控制器处理的非常简单的编辑表单。使用angular.copy( object/array)可以处理项目的副本。表单中的ng-submit=updateItem()然后使用编辑后的副本

中的值更新原始项属性

<ul>
  <li ng-repeat="item in items"><button ng-click="editItem(item)">Edit</button>{{item.first}} {{item.last}} </li>
</ul>

 <form ng-submit="updateItem()" ng-show="activeItem">
 <h3>Edit Item</h3>
    <div><input ng-model="editCopy.first" type="text"/></div>
    <div><input ng-model="editCopy.last" type="text"/></div>
    <div><input type="submit" value="Update"/></div>
</form>

app.controller('MainCtrl', function($scope) {
  /* utility function*/
  var swapItemValues=function(from,to){
      for(key in from){
        to[key]=from[key];
      }      
    }

  $scope.items=[{first:'SpongeBob', last:'SquarePants'} ];


    $scope.editItem=function(item){
      $scope.editCopy=angular.copy(item);      
      $scope.activeItem=item;/* reference to original item, used for form ng-show as well as to do update*/

    }

    $scope.updateItem=function(){
       swapItemValues( $scope.editCopy,$scope.activeItem );
       $scope.activeItem=null;/* form `ng-show` only displays when there is an activeItem*/
    }

});

DEMO：http://plnkr.co/edit/O52EIk9ops8UqIFmbqXw?p=preview

根据相关的取消评论

进行Undo编辑，略微升级DEMO

http://plnkr.co/edit/c7H7lYBTnd2P6ShK7Ela?p=preview

工作在模型的拷贝的共有的形式

2 个答案: