如何使用递增的ng模型动态创建多个表单输入字段？
如何使用递增的ng模型动态创建多个表单输入字段？
提问于 2015-02-02 23:23:27
在阅读这篇文章之后，我了解了如何使用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">这是如何做到的呢？
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-02-02 23:42:18
我建议重组您的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等不同的是，bars的数量是未知的，因此数组是更好的选择)
编辑
如果您真的需要，还可以使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 = {};Stack Overflow用户
发布于 2015-02-02 23:35:41
当我必须这样做时，我使用$index来控制事物的名称。虽然我从来没有尝试过这个精确的代码，但这应该是可行的。
<input ng-model='vm.foo.bar3[$index]'></input>每当您执行ng-重复操作时，$index就会出现，它只是列表项的索引。因此，这最终应该是制造vm.foo.bar3.0的ng模型。
Stack Overflow用户
发布于 2015-02-02 23:35:21
按照我的观点，您应该在控制器中创建模型数组。
$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> 希望它能帮到你！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28288712
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号