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

当我必须这样做时，我使用$ index来控制事物的名称。虽然我从未尝试过这个确切的代码，但这应该可行。

<input ng-model='vm.foo.bar3[$index]'></input>

$ index只要你执行ng-repeat就会出现，它只是列表项的索引。所以最终应该将vm.foo.bar3.0的ng-model制作成任何东西。

Answer 2

我建议重新构建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>

但不要忘记首先在控制器中创建vm.foo对象：

this.foo = {};

Answer 3

就我而言，您应该在控制器中创建模型数组。

$scope.vm.foo = [{
    bar1: [{
        first: '',
        second: '',
        ...
       },
    bar2: ...
  ],
}]

然后在您的视图中迭代您的标签：

<div ng-repeat="elem in foo">
    <div ng-repeat="input in elem">
        <input ng-model="input">
    </div>
</div>

希望它会对你有所帮助！

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

3 个答案: