Edit object via modal in AngularJS - use a temporary object?

Question

Edit object via modal in AngularJS - use a temporary object?

Scenario: User clicks on item. Following code runs and opens a modal with a textbox that has the item's name populated.

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

My HTML within the modal:

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

This works fine, the modal shows (using ng-show) and the textbox is populated with the item's name.

Im using a new object to populate the textbox because I don't want the original object to change (via AngularJS auto data binding) until I press 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 issue though is what to put into the update method? I want to update the original item (held in an array of items).

javascript
angularjs

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;
};