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?

pkozlowski.opensource · Accepted Answer · 2012-11-19 11:02:49Z

15

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.

answered Nov 19, 2012 at 11:02

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

vitalets Over a year ago

To automate that stuff I've created lazy-model directive github.com/vitalets/lazy-model

Collectives™ on Stack Overflow

AngularJS binding between variables

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related