如何在动态确定索引的数组项上实现AngularJS双向数据绑定？

我现在有一个从数据库获取的已排序Javascript数组：

customers = [{'id':1, 'name':'John'},{'id':2, 'name':'Tim'}, ...]

还有绑定到数组索引的输入框：

<input type='text' name="forJohnOnly" ng-model="customers[0].name" />
<input type='text' name="forTimOnly" ng-model="customers[1].name" />

目前这个方式能工作，但有隐患：如果数据库的排序规则被修改，第一个输入框就会错误绑定到Tim的姓名，而且修改后的数据还会被回写到数据库。我希望能根据ID动态找到对应的对象来绑定，不要依赖数组索引，也不想创建额外数组来复制数据，类似这样的效果：

<input type='text' name="forJohnOnly" ng-model="customers[where customers.id=1].name" />
<input type='text' name="forTimOnly" ng-model="customers[where customers.id=2].name" />

（必须用ID绑定，因为姓名可能会被修改）

这里有两个完全符合你需求的方案，都不需要额外复制数据，直接操作原数组对象：

方案1：控制器中定义查找函数 #

直接在AngularJS控制器里写一个根据ID查找客户的函数，模板里调用这个函数就能精准获取到对应的对象，完全不依赖数组排序。

控制器代码： #

$scope.getCustomerById = function(targetId) {
  // 从原数组中找到匹配ID的客户对象
  return $scope.customers.find(function(customer) {
    return customer.id === targetId;
  });
};

模板代码： #

<input type='text' name="forJohnOnly" ng-model="getCustomerById(1).name" />
<input type='text' name="forTimOnly" ng-model="getCustomerById(2).name" />

这个方法的好处是简单直接，哪怕数组排序变化、新增删除元素，只要ID正确就能找到对应的对象。而且因为返回的是原数组的对象引用，修改输入框内容会直接同步到原customers数组，完全不用额外做数据同步。

方案2：将数组转为ID映射对象（性能更优） #

如果你的customers数组不会频繁新增或删除，可以在获取到数据后，一次性把数组转成以ID为键的对象映射，这样模板里访问更直接，查找性能也更好（不用每次都遍历数组）。

控制器代码： #

// 在获取到customers数组后执行一次转换
$scope.customersMap = {};
$scope.customers.forEach(function(customer) {
  // 直接引用原数组的对象，没有复制开销
  $scope.customersMap[customer.id] = customer;
});

// 如果后续数组有更新，重新执行上面的代码更新映射即可

模板代码： #

<input type='text' name="forJohnOnly" ng-model="customersMap[1].name" />
<input type='text' name="forTimOnly" ng-model="customersMap[2].name" />

同样，因为映射里的对象是原数组的引用，修改输入框内容会直接同步到原customers数组，回写数据库时完全没问题。

小提示 #

如果担心ID不存在导致绑定报错，可以给输入框加个ng-if判断：

<input 
  type='text' 
  name="forJohnOnly" 
  ng-if="getCustomerById(1)"
  ng-model="getCustomerById(1).name" 
/>

或者针对映射的方案：

<input 
  type='text' 
  name="forJohnOnly" 
  ng-if="customersMap[1]"
  ng-model="customersMap[1].name" 
/>

内容的提问来源于stack exchange，提问作者Tony_Henrich