Question

我有一个项目表，旁边有一个编辑按钮。单击编辑按钮时，该行中的字段将变为可以编辑它们的输入字段，并显示取消按钮。如果他们单击取消，则字段将变回常规显示字段。它有点像内联编辑。我有两组<td>元素：一组用于显示，一组用于编辑。

我正在寻找的是保持项目原始值的好方法，这样当他们点击取消时，数据会恢复原来的状态。但如果他们点击保存，我希望这些数据留在对象上，以及应该显示的内容。

我最初尝试过此操作（逻辑和处理在控制器中）：在编辑按钮上单击，我创建一个＆＃34;快照＆＃34;对象作为自身的属性。有点像...

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

所以我实际上在做的是，当没有编辑行时，我显示item.someProperty。单击编辑按钮时，它会在控制器中执行该复制，我显示的字段实际上是item.modified.someProperty。这些是我提到的那两组<td>元素中的不同绑定，除了第二组是输入字段这一事实。

就恢复过程而言（当他们点击取消时）效果很好，但如果他们点击保存，我就会卡在要更新对象原始值的部分。基本上，我需要一种方法将item.modified属性转换为item本身。我尝试过这样的事情：

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

它似乎并没有起作用。我不认为我期望它首先起作用，因为它有点像用自己覆盖自己。不确定这是否有效。

实现这一目标的好方法是什么？或者可能有更好的方法去做我想做的事情？

Answer 1

使用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

将各种{{1}}设置为{{1}}属性。如果用户取消编辑，则原始对象保持不变，因此无法还原

AngularJS - 编辑对象并应用/还原更改

1 个答案: