Question

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

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

getterSetter选项意味着我可以通过控制器中的方法传递所有值，以便验证和/或更新其他值，例如：

let bar = null;

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

这非常有效。

现在我有一个foo对象，里面有多个bar值。我不知道会有多少酒吧。我想为每个栏创建一个输入。使用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>

啊，但是如何将模型链接到getter-setter？我不知何故需要向getter-setter表明正在使用$index。我当然可以直接使用一组模型值，但是我不会得到getter-setter的好处！

Answer 1

到目前为止，我提出的最好的想法是使用一系列的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;
  }
}

有更好的想法吗？

使用带有ng-repeat的AngularJS getterSetter

1 个答案: