I've got a list of users which I retrieve from my service. When I select any user I can see and edit info (email, roles, etc). The problem is that I don't want these changes to affect user's data in the list, I want to update data only after saving (clicking a button).
Now I'm using two variables:
$scope.selected - currently selected user
$scope.editable - variable for storing the data I'm editing
And I exchange data like this:
$scope.initEditable = function ()
{
$scope.editable = {};
$.extend($scope.editable, $scope.selected);
}
Looks like a terrible solution. What is the proper way to do it?
I've got a list of users which I retrieve from my service. When I select any user I can see and edit info (email, roles, etc). The problem is that I don't want these changes to affect user's data in the list, I want to update data only after saving (clicking a button).
Now I'm using two variables:
$scope.selected - currently selected user
$scope.editable - variable for storing the data I'm editing
And I exchange data like this:
$scope.initEditable = function ()
{
$scope.editable = {};
$.extend($scope.editable, $scope.selected);
}
Looks like a terrible solution. What is the proper way to do it?
Share Improve this question edited Oct 22, 2014 at 12:59 George G 7,69512 gold badges48 silver badges61 bronze badges asked Nov 19, 2012 at 10:42 ChruSChruS 3,7475 gold badges31 silver badges40 bronze badges1 Answer
Reset to default 15Actually, this is the Angular-way of approaching this problem, you are on the right track. In scenarios like yours one would typically:
- Copy an item upon selection (edit start) - this is what you do with
editable - Have 2-way data binding changing a copy (or an original element)
- Upon edit pletion we can propagate changes from a copy to the original
The nice things about this pattern is that we can easily:
- Offer the 'cancel' functionality where users can revert their changes
- Be able to pare a copy and the original and drive parts of the UI based on this parison (for example, we could disable a 'Save' button if there were no changes)
So, I don't think at all that this approach is terrible. The only suggestion I could have is to use angular's angular.copy method instead of $.extend.