javascript - AngularJS。装修模型

Question

后端返回 json 如下:

[ 
  {
    id: 1,
    name: "the name",
    countryIds: [ 1,2,3]
  }, ...
]

如您所见，有 countryIds 属性。在客户端，我已经缓存了具有相应 ID 的国家/地区名称:

[ 
  {
    id: 1,
    name: "USA"
  },
  { 
    id:2, name: "France"
  }...
]

，因此在检索此对象时，我只需添加新的 countries 属性，在其中分配国家/地区名称:

obj.countries = getCountryNamesByIds(obj.countryIds); 

所以我的初始对象看起来像这样:

   {
        id: 1,
        name: "the name",
        countryIds: [ 1,2,3],
        countries: ["USA", "France", "England"]
      }

问题是，在更新后将对象发送到服务器时(使用 PUT 方法)，我不想将 countries 属性发送到服务器。我怎样才能以更优雅的方式处理这种情况？在我看来，有几个选择:

1.当将对象发送到服务器时，只需删除所有不必要的属性(不好的方式，因为如果将新属性添加到 JSON，那么我也需要在 Controller 逻辑中应用相同的更改)；

2.不要用新的countries属性来修饰对象，并公开一些应用程序级方法，例如

$rootScope.getCountryNamesByIds = getCountryNamesByIds;

然后在模板中使用它:

<label> Countries </label>
<div> {{getCountryNamesByIds(obj.countryIds)}} </div>

3.不要用新的 countries 属性修饰对象，并创建名为 countryNames 的指令，该指令将从国家/地区 ID 生成国家/地区名称(如第 2 点所示):

<div country-names country-ids="obj.countryIds"> // There will be shown country names generated from their IDs</div>

您认为，哪种选择更优雅？或者还有什么其他方法可以解决我的挑战？

Answer 1

这个问题我已经遇到过很多次了，并且尝试了所有的解决方案。一般来说，我会做以下事情:

1. 当我可能需要编辑并发回的内容时，不要修饰，而是使用单独的列表和查找，就像您的 #2 和 #3。
2. 当它是我不需要编辑的东西时 - 例如使用您的示例，如果我需要为该对象添加注册，那么它实际上是一个单独的资源 - 然后装饰

第三种可能性是将其保存为对象上的函数

obj.getCountries = function() {return [["USA", "France", "England"] ]; };

然后在模板中使用它

<div> {{obj.getCountries())}} </div>

仅供引用，我为 ng-resource 创建了一个 patch 方法，因此我只能通过 PATCH 保存更改。在这里没有帮助，但它是同一整体问题的一部分。在这种情况下，将其扩展为“仅发回已更改的项目，而不是添加的任何内容”并不难，这也可以解决该问题。