在AngularJS中通过模态编辑对象 - 使用临时对象？ [英] 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 };
};

模式中的我的HTML：

My HTML within the modal:

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

这个工作正常，模态显示（使用 ng-show ）并且文本框中填充了项目的名称。

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

我使用新对象来填充文本框，因为我不想要原文要更改的对象（通过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?!
};

我的问题是将什么放入更新方法？我想更新原始的项（保存在一个项目数组中）。

My issue though is what to put into the update method? I want to update the original item (held in an array of items).

推荐答案

我会这样做：

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

这篇关于在AngularJS中通过模态编辑对象 - 使用临时对象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！