javascript - 如何使用递增的 ng-model 动态创建多个表单输入字段？

Question

阅读后this article ，我了解了如何使用 ng-repeat 动态添加表单字段。

我想知道如何使用递增的 ng-model 值动态创建多个表单元素。

例如，以下内容将通过单击按钮创建。

<input ng-model="vm.foo.bar1.first">
<input ng-model="vm.foo.bar1.second">
<input ng-model="vm.foo.bar1.third">
<input ng-model="vm.foo.bar1.fourth">

<input ng-model="vm.foo.bar2.first">
<input ng-model="vm.foo.bar2.second">
<input ng-model="vm.foo.bar2.third">
<input ng-model="vm.foo.bar2.fourth">

<input ng-model="vm.foo.bar3.first">
<input ng-model="vm.foo.bar3.second">
<input ng-model="vm.foo.bar3.third">
<input ng-model="vm.foo.bar3.fourth">

如何做到这一点？

Answer 1

我建议重组您的 ViewModel 以使 vm.foo.bar 成为一个数组。那么这将是微不足道的:

<div ng-repeat="item in barItems">
  <input ng-model="vm.foo.bar[$index].first">
  <input ng-model="vm.foo.bar[$index].second">
  <input ng-model="vm.foo.bar[$index].third">
  <input ng-model="vm.foo.bar[$index].fourth">
</div>

或者，如果你坚持的话，也可以

<div ng-repeat="item in barItems" ng-init="outerIdx = $index">
   <input ng-repeat='p in ["first", "second", "third", "fourth"]' 
          ng-model="vm.foo.bar[outerIdx][p]">
</div>

(我在这里假设，与 first、second 等不同...，bar 的数量不是已知 - 因此数组是更好的选择)

编辑:

如果你真的想要，你也可以使 vm.foo 成为一个包含属性 bar1、bar2 等的对象:

<div ng-repeat="item in [1, 2, 3, 4]">
  <input ng-model="vm.foo['bar' + item].first">
  <input ng-model="vm.foo['bar' + item].second">
  <input ng-model="vm.foo['bar' + item].third">
  <input ng-model="vm.foo['bar' + item].fourth">
</div>

但不要忘记首先在 Controller 中创建 vm.foo 对象:

this.foo = {};