使用 AngularJS getterSetter 和 ng-repeat

Using AngularJS getterSetter with ng-repeat

使用 AngularJS 1.6 我有一个使用 getter-setter 模型的简单输入:

<input name="bar" type="number"
    ng-model="dialog.bar" ng-model-options="{getterSetter:true}" />

getterSetter 选项意味着我可以让所有值都通过我的控制器中的一个方法,以验证 and/or 更新其他值,例如:

let bar = null;

this.bar = function(value) {
  if (arguments.length) {
    validate(value);
    bar = value;
    update();
  }
  return bar;
}

效果很好。

现在我有一个 foo 对象,其中有多个 bar 值。我不知道会有多少酒吧。我想为每个栏创建一个输入。 UI 使用 ng-repeat:

很简单
<div ng-repeat="bar in foo.getBars()">
    <input name="bar{{$index}}" type="number"
        ng-model="dialog.bar" ng-model-options="{getterSetter:true}" />
</div>

啊,但是我如何 link 模型返回 getter-setter?我需要以某种方式向 getter-setter 指示正在使用哪个 $index。我当然可以直接使用模型值数组,但这样我就无法获得 getter-setter!

的好处

到目前为止我想出的最好的主意是使用一个 getter-setter 数组。然后模型看起来像这样:

<div ng-repeat="bar in foo.getBars()">
    <input name="bar{{$index}}" type="number"
        ng-model="dialog.bars[$index]" ng-model-options="{getterSetter:true}" />
</div>

然后对于每个 bars[x] 我简单地创建一个单独的函数,每个函数通过正常循环使用闭包记住 $index

const bars = Array(max).fill(0); //values

this.bars = Array(max); //getter-setter functions
for(let i=0; i<max; i++) {
  this.bars[i] = function(value) {
    if (arguments.length) {
      validate(value);
      bars[i] = value;
      update();
    }
    return bar;
  }
}

有更好的主意吗?