使用ng-repeat创建动态表单 [英] creating dynamic forms using ng-repeat
问题描述
我已经使用ng-repeat来执行以下操作:
- 对于每个属性,用户需要为每个Feed创建一个新标签的每个Feed
-
Feed有一个标签,并创建输入文本框。
标记:< tabset>
< tab ng-repeat =feed in feedsheading ={{feed.heading}}>
< form role =form>
< div class =rowng-repeat =feed.properties中的属性>
< div class =col-xs-6>
< div class =input-group>
< span class =input-group-addon>
< span> {{property.name}}< / span>
< / span>
< input type =textclass =form-controlvalue ={{property.value}}>
< / div>
< / div>
< / div>
< / form>
< / tab>< / tabset>
不过,我想知道捕获这种用例的数据的方式是什么,显然我不知道每个feed有多少个feed或者属性,所以我想我需要以某种方式把它绑定到一个数组。
问题是如何?
使用 ng-model
< input type =textclass =form-control ng-model =property.value>
这样,文本框绑定到 property.value
。当您更改文本框中的文本时,角度会自动更新 property.value
。您可以像JS中的任何其他变量一样在JS中使用它。这是有角度的美。
Hello everyone I need to create some dynamic forms so users can configure feeds to their specification.
I have used ng-repeat to do the following:
- For each feed a user needs to configure a new tab is created
for each property a feed has a label and input textbox is created. Markup:
<tabset> <tab ng-repeat="feed in feeds" heading="{{feed.heading}}"> <form role="form"> <div class="row" ng-repeat="property in feed.properties"> <div class="col-xs-6"> <div class="input-group"> <span class="input-group-addon"> <span>{{property.name}}</span> </span> <input type="text" class="form-control" value="{{property.value}}"> </div> </div> </div> </form> </tab></tabset>
This works just fine with the backing json that I have however I am wondering what the accepted way of capturing the data for this kind of use case, obviously I won't know how many feeds or properties each feed has so I suppose I need to bind this to an array in some way.
The question is how?
use ng-model
<input type="text" class="form-control" ng-model="property.value">
This way the textbox is bound to property.value
. angular automatically updates property.value
when you change the text in the textbox. You can use it in your JS just like any other variable. That's the beauty of angular.
这篇关于使用ng-repeat创建动态表单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!