AngularJS - オブジェクトの編集と変更の適用/元に戻す

Question

私はその横に編集ボタンがある項目の表を持っています。編集ボタンがクリックされると、その行のフィールドは入力フィールドに変わり、編集可能になり、キャンセルボタンが表示されます。 [キャンセル]をクリックすると、フィールドは通常の表示フィールドに戻ります。インライン編集のようなものです。私は<td>要素の2つのセットを持っています：一つは表示用、もう一つは編集用です。

私が探しているのは、アイテムの元の値を保持するための良い方法です。キャンセルをクリックすると、元のデータに戻ります。しかし、保存をクリックすると、そのデータをオブジェクトに残しておき、それを表示する必要があります。

私はもともとこれを試しました（ロジックと処理はコントローラにあります）。編集ボタンをクリックすると、オブジェクトの「スナップショット」を属性として作成します。以下のような何か...行が編集されていないときに

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

は、だから私は実際にやっている、私は item.somePropertyを表示しています。編集ボタンをクリックすると、そのコピーがコントローラで実行され、実際に表示されるフィールドは item.modified.somePropertyです。それらは、2番目のセットが入力フィールドであることを除いて、前述の2つのセットの異なるバインドです。

キャンセルをクリックすると元の状態に戻りますが、保存をクリックするとオブジェクトの元の値を更新する部分が残っています。基本的には、プロパティをitemに取得する方法が必要です。私は次のようなことを試みました：

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

そして、それは動作していないようです。私はそれがそれ自身で上書きするようなものなので、私はそれが最初に動作すると思ったとは思わない。それがうまくいくかどうかはわかりません。

これを行うにはどうすればよいですか？それとも、私がやろうとしていることをするためのより良い方法がありますか？

Answer 1

copy()とextend()の組み合わせを使用してください。コピーのみを編集し、さまざまなng-modelvm.editItemにプロパティを設定し

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

を保存するときに拡張できることを、オリジナルへの参照を格納します。ユーザーは、元のオブジェクトを編集キャンセルした場合、私は書き換えされ、より明確に推測