2

以下问题：假设我们有一个这样的对象：

$scope.Something = { 'a' : { object... }, 'b' : { another object... } }

这个Something-object也在视图中呈现如下：

<div ng-repeat="s in Something">{{ Something[s].someProperty }}</div>

用户想要编辑Something.a。为此，我们向他展示了一个表格。在显示表单之前，我将当前的Something.a保存为副本：

$scope.copyForUndo= angular.copy($scope.Something.a);

现在，如果用户点击“取消”，它会得到：

$scope.Something.a = angular.copy($scope.copyForUndo);

但从那以后，这种关联似乎消失了。不管用户现在对Something.a 做了什么更改，视图都不会更新。

为什么？

我知道，对象的相等性是什么（例如，{ object1: true } != {object1 : true}但我仍然无法理解，为什么它不起作用。

4

5 回答 5

2

如果复制源是 ng-repeat 迭代项，则应使用

angular.copy($scope.copyForUndo, $scopy.sourceItem)

而不是

$scope.sourceItem = angular.copy($scope.copyForUndo)

否则，您的数据绑定 dom 不会跟踪，因为$$hashkey迭代项的 被滥用复制语句擦除。

https://github.com/angular/angular.js/blob/g3_v1_2/src/Angular.js#L777

于 2015-01-10T11:47:09.440 回答
2

如果可以制作$scope.Something数组，则可以编辑副本，然后在保存更改时更新数组。它仍然提供撤消，但与您呈现它的方式相反。

在这里小提琴：http: //jsfiddle.net/GYeSZ/1/

function MyCtrl($scope) {
    $scope.Something = [
        { name: "Aye", desc: new Date() },
        { name: "Bee", desc: new Date() },
        { name: "See", desc: new Date() }
    ];

    $scope.edit = function(idx) {
        $scope.copy = angular.copy($scope.Something[idx]);
        $scope.idx = idx;
    }

    $scope.save = function() {
        $scope.Something[$scope.idx] = angular.copy($scope.copy);
        $scope.cancel();
    }

    $scope.cancel = function() {
        $scope.copy = null;
        $scope.idx = -1;
    }
}

更新 有一种替代语法ng-repeat可用于枚举字典以获取其密钥。使用此语法，您可以使用您在问题中描述的数据结构

在这里小提琴：http: //jsfiddle.net/GYeSZ/3/

function MyCtrl($scope) {

    $scope.edit = function(key) {
        $scope.copy = angular.copy($scope.Something[key]);
        $scope.key = key;
    }

    $scope.Something = {
        "a": { name: "Aye", desc: new Date() },
        "b": { name: "Bee", desc: new Date() },
        "c": { name: "See", desc: new Date() }
    };

    $scope.save = function() {
        $scope.Something[$scope.key] = angular.copy($scope.copy);
        $scope.cancel();
    }

    $scope.cancel = function() {
        $scope.copy = null;
        $scope.key = null;
    }
}

html

<div ng-repeat="(key, value) in Something" ....>

于 2013-09-17T04:29:58.453 回答
1

这似乎有点奇怪，但如果你可以保存原始数组 $scope.Something 然后取消你可以重新绑定它。

 // saving original array to get the original copy of edited object
 var originalArrayCopy = angular.copy($scope.Something);
 ............
 // When user clicks cancel then simply filter the originalArray to get the original copy, here i am assuming there is a field in object which can uniquely identify it. 
// var originalObject = originalArrayCopy .filter(function(elm)
   {
       if(editedObject.Id == elm.Id)
              return elm;
   } );
 // once i get the original object , i can rebind it to the currentObject which is being edited.
于 2013-09-17T04:39:36.957 回答
1

非破坏性表单编辑：http ://egghead.io/lessons/angularjs-angular-copy-for-deep-copy

概要：

  • 创建指向用户单击编辑的对象的指针
  • 创建用户编辑并可以决定保存|取消的对象的副本
于 2013-10-14T16:45:50.887 回答
0

我不确定这是否与您正在复制副本或什么有关，但这是一个有效的 plunker

复制示例 Plunker

于 2013-09-17T04:16:40.650 回答