使用 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;
}
}
有更好的主意吗?
使用 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;
}
}
有更好的主意吗?