Editing an object via modal in AngularJS - use a temporary object?

Question

Scenario: A user clicks on an item. After the code is executed, the modal is launched with a text field in which the element name is used.

$scope.edit = function (item) { $scope.editingItem = { Name: item.Name }; }; 

My HTML is in modal format:

 <input type="text" ng-model="editingItem.Name"/> 

This works fine, modal shows (using ng-show ), and the text box is populated with the element name.

I am using a new object to populate a text field because I do not want the original object to change (via the AngularJS auto-binding binding) until I click the save button.

Then this HTML:

 <a href="" ng-click="update(editingItem)">Save</a> 

Leads to:

 $scope.update = function (item) { // What do I put in here to update the original item object that was passed // into the edit function at the top of this question?! }; 

My problem is that add update method? I want to update the original item (contained in an array of elements).

Answer 1

I would do this:

 $scope.edit = function (item) { $scope.editingItem = { Name: item.Name }; $scope.originalItem = item;//store the instance of the item to edit }; $scope.update = function (item) { $scope.originalItem.Name = item.Name;//copy the attributes you need to update //clear temp items to remove any bindings from the input $scope.originalItem = undefined; $scope.editingItem = undefined; };