Javascript AngularJS-编辑对象并应用/恢复更改

我有一个项目表，旁边有一个编辑按钮。单击“编辑”按钮时，该行中的字段将变为可编辑的输入字段，并显示“取消”按钮。如果单击“取消”，这些字段将变回常规显示字段。这有点像内联编辑。我有两套

元素：一套用于显示，一套用于编辑

我正在寻找的是一种保持项目原始值的好方法，这样当他们单击“取消”时，数据会返回到原来的状态。但是如果他们单击save，我希望数据保留在对象上，这就是应该显示的内容

我最初尝试过这样做（逻辑和处理在控制器中）：在编辑按钮上单击，我将创建对象的“快照”，作为对象本身的属性。类似于

vm.edit = function(item) {
    item.modified = angular.copy(item);
}

所以我实际上要做的是，当行没有被编辑时，我显示

item.someProperty

。单击编辑按钮时，它会在控制器中执行该复制，我显示的字段实际上是

item.modified.someProperty

。这些是我提到的两组

元素中的不同绑定，第二组是输入字段

它可以很好地进行恢复（当他们单击“取消”时），但如果他们单击“保存”，我将无法更新对象的原始值。基本上，我需要一种方法来获取

item.modified

属性到

item

本身。我试过这样做：

vm.save = function(item) {
    item = angular.copy(item.modified);
}

而且它似乎不起作用。我不认为我一开始就期望它能工作，因为这有点像是用它自己覆盖它自己。不确定这是否有效

---

实现这一目标的好方法是什么？或者也许有更好的方法来完成我想做的事情？

结合使用

copy（）

和

extend（）

。仅编辑副本并存储可在保存时扩展的对原始副本的引用

var  storedItem;


// copy to variable before editing and store reference to original
vm.edit = function(item) {
    storedItem = item;
    vm.editItem = angular.copy(item);
}

vm.save = function() {
   angular.extend(storedItem, editItem);
   vm.editItem = null;
   storedItem = null;
}

---

将各种

ng model

设置为

vm.editItem

属性。如果用户取消编辑，则原始对象已保持不变，因此没有任何可恢复的内容

请结合使用

copy（）

和

extend（）

。仅编辑副本并存储可在保存时扩展的对原始副本的引用

var  storedItem;


// copy to variable before editing and store reference to original
vm.edit = function(item) {
    storedItem = item;
    vm.editItem = angular.copy(item);
}

vm.save = function() {
   angular.extend(storedItem, editItem);
   vm.editItem = null;
   storedItem = null;
}

---

将各种

ng model

设置为

vm.editItem

属性。如果用户取消编辑，则原始对象已保持不变，因此没有任何内容可恢复

我猜更清晰的内容将被重写

vm.save=function（item）{var copy=angular.copy（item.modified）；item=copy；}

我猜更清晰的内容将被重写

vm.save=function（item）{var copy=angular.copy（item.modified）；item=copy；}