在 angular 中使用 ng-repeat 防止影响原始对象的 'copied' 更改

Question

我在 angular 中有一个设置，它显示一个名为 'items' 的 json 字符串。每个项目都包含一个字段 ID 数组。通过匹配字段 ID，它使用单独的 'fields' json 字符串提取字段信息。

 {
  "data": [
    {
      "id": "1",
      "title": "Item 1",
      "fields": [
        1,
        1
      ]
    },
    {
      "id": "2",
      "title": "Item 2",
      "fields": [
        1,
        3
      ]
    },
    {
      "id": 3,
      "title": "fsdfs"
    }
  ]
}

您可以复制或删除项目或字段，这将修改 'items' json。

一切正常，除非我复制一个项目（及其字段），然后选择删除该特定项目的一个字段。

发生的情况是它删除了复制项和原始项的字段。

笨蛋-

http://plnkr.co/edit/hN8tQiBMBhQ1jwmPiZp3?p=preview

我读到过使用 'track by' 有助于将每个项目编入索引并防止重复键，但这似乎没有效果。

感谢任何帮助，谢谢

编辑-

感谢 Eric McCormick，使用 angular.copy 和 array.push 解决了这个问题。

而不是-

$scope.copyItem = function (index) {
       items.data.push({
            id: $scope.items.data.length + 1,
            title: items.data[index].title,
            fields: items.data[index].fields
        });
}

这有效 -

$scope.copyItem = function (index) {
 items.data.push(angular.copy(items.data[index])); 
 }

Answer 1

我推荐使用angular.copy，这是一个"deep copy"的源对象。这是源对象中的唯一对象。

这似乎有点违反直觉，但直接引用（如您所观察的那样）与原始对象交互。如果在 DOM 中实例化后 inspect the element's scope，您可以看到内存中有一个 $id 属性分配给对象。基本上，通过使用 angular.copy(source, destination)，您可以确保复制所有 properties/values 并拥有唯一的对象。

示例：

//inside the controller, a function to instantiate new copy of selected object
this.selectItem = function(item){
  var copyOfItem = angular.copy(item);
  //new item with same properties and values but unique object!
}

Egghead.io 有 a video on angular.copy.

在 angular 中使用 ng-repeat 防止影响原始对象的 'copied' 更改

Prevent change of 'copied' object affecting original using ng-repeat in angular

json

angularjs

ng-repeat