在AngularJS中，哪里可以存储可更改对象的初始Object值？

Question

I'm using a factory to create different user-Objects from data which comes from the Server. Each user-Object has a "userGroup"-property. A list of users is displayed using ng-repeat in the View. And there it is possible to change the userGroup-value from "basic" to "admin", because of the AngularJS 1 two way binding. So the original values of the Object are gone. So my question is: when we want to cancel the made changes where should the initial value {userGroup: "basic"} be stored? I was thinking about two possible solutions:

1. create an additional property "initUserGroup" in the User Factory Class and store a value for each Object
2. use localstorage (up to 20 records must be saved at once)

Are there any best practices for such cases?

Answer 1

For example, you can backup whole object in a property like _backup (using angular.copy) and restore if you with to undo changes (using angular.extend). Here is an example:

$scope.editItem(item) {
  item._backup = angular.copy(item);
}

$scope.undoEdit(item) {
  angular.extend(item, item._backup);
  //delete unused data
  delete(item._backup);
}

In this case you won't need to save data outside current object.