AngularJS binding between variables

Question

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?

Answer 1

Actually, 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 completion 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 compare a copy and the original and drive parts of the UI based on this comparison (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.