javascript - angularjs 使用 array.push 引用同一对象向 2 个下拉列表添加选项

Question

我有很多这样的人:

[
  {'name': 'Bob', 'age': 25, 
  'addresses': [
               {
                'city': 'San Franscisco', 'state': 'CA','streetline': 'One Drive',
                'selected': true
               },
               {
                'city': 'San Jose', 'state': 'CA', 'streetline': 'Two Drive',
                'selected': false}
               ]
               ]
  },
  {'name': 'Rob', 'age': 29, 
  'addresses': [
               {
                'city': 'Baltimore', 'state': 'MD', 'streetline': 'Three Drive', 
                'selected': false
               },
               {
                'city': 'Detroit', 'state': 'MI', 'streetline': 'Four Drive',
                'selected': true}
               }
               ]
  }
]

外部应用程序之一可以通过将新地址推送到每个人对象来向每个人添加新的公共(public)地址。

这些地址用于填充每个人的下拉列表。添加新地址后，它在每个地址数组中的显示方式有所不同。当在下拉列表中为其中任何一个人选择新地址时，该地址的选定标志将设置为 true，而对于所有其他旅行者，该标志将设置为 false。

问题是，如果我为一个旅行者选择不同的地址并为另一个旅行者选择新地址，则第一个旅行者中的新地址将引用第二个旅行者中的新地址。因此，所选标志不是应有的样子。调试时，旅行者 2 的显示为 {'selected': true}，旅行者 1 的显示为 $ref [1][address]，它引用了旅行者 2 的选定地址。

我不知道为什么会这样。

任何帮助将不胜感激!

Answer 1

我认为问题发生在你向旅行者推送新选项时。如果你这样做:

travellers[0].addresses.push(newAddress);
travellers[1].addresses.push(newAddress);

两者共享对同一地址的引用，并且可能会出现您所描述的问题。您可以使用 Angulars copy 方法来防止这种情况发生。

travellers[0].addresses.push(angular.copy(newAddress));
travellers[1].addresses.push(angular.copy(newAddress));

angular.copy() 创建其参数的深拷贝，以便两个旅行者地址都包含自己的新地址副本。

有关更多信息，请参阅:https://docs.angularjs.org/api/ng/function/angular.copy