如何在Angular中绑定地图的键

Question

我收到一个位于服务器端地图的对象，即键值数组。我想以 Angular 形式绑定它，并能够修改值（简单）和键。挑战在于，当键被修改时，关联的值必须保持链接。

我试过了：

<div ng-repeat="(type, value) in estate.extraServices track by $index">
    <input ng-model="type"> <input ng-model="estate.extraServices[type]">
</div>

但是当第一个输入改变时，一个新的线被添加到地图中并且新的线没有链接到新的线。

我的目标是避免使用作用域函数来解决这个问题，所以我没有抱太大希望，但谁知道呢！

如果无法绑定键，我可能会将对象结构更改为 Pair 对象数组（2 个属性：键和值）

<div ng-repeat="pair in array">
    <input ng-model="pair.key"> <input ng-model="pair.value">
</div>

Answer 1

您不能将输入绑定到实际的属性名称。对象属性名称不能动态更改

但是，您的第一个示例可以很好地更新值

<div ng-repeat="(type, value) in estate.extraServices track by $index">
   {{type}} <input ng-model="estate.extraServices[type]">
</div>

至于添加键，您需要使用未绑定到该对象的不同输入来向对象添加新键。然后使用事件处理程序使用更新对象的函数

删除键也一样，使用事件处理函数delete object[key]

根据对象的使用方式，更改为具有相同键名结构的对象数组可能是最简单的

DEMO