Cancelling / reverting changes to models in angular.

Right up front I’m going to say that i haven’t found the right answer to this problem. Yet.


Add undo or save abilities to edits on a model in Angular.

I have two templates which bind to my model. The edit template and the view template. When in the view the data is bound essentially one way and there is no problem. For edit, angular has some great binding that reacts to change events and sets the model value to the current value of the input. This is a key aspect of the angular frame work, and in a lot of places, this data-binding is really useful, except if you not sure you want to keep those changes.

the two way binding will overwrite the original model with the new changes and then the original values are gone. so how do i implement a cancel/revet button?

things i have tried already

‘get’ the model again from a saved point. This involves making a request to the server for the original model value. Its expensive both in network & time, so doesn’t lead to a great user experience. Also this breaks for things not yet stored on the server.

copy & change. Take a copy of the model, edit that and push the changes back on save. The failure here is that with an async system like javascript, my model might not be fully loaded at the point i want to copy, and even if it is, how do i reflect changes to the original in my ‘editing’ copy?

cacheing the model on each ‘save’ which allows me to get the original value back if my edit are cancelled. Still changes to the original from another source need to be re-cached.


so im ata a loss. for now. ill write back if i find a suitable answer.