通过 AngularJS 中的模态编辑对象 - 使用临时对象？

Question

场景：用户点击项目。以下代码运行并打开一个带有填充项目名称的文本框的模式。

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

我在模态中的 HTML：

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

这很好用，模式显示（使用ng-show）并且文本框填充了项目的名称。

我正在使用一个新对象来填充文本框，因为我不希望在按下保存按钮之前更改原始对象（通过 AngularJS 自动数据绑定）。

然后是这个 HTML：

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

导致：

$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?!
};

我的问题是在update 方法中添加什么？我想更新原来的item（保存在一个项目数组中）。

Answer 1

我会这样做：

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