使用ng-repeat创建动态表单 [英] creating dynamic forms using ng-repeat

问题描述

我已经使用ng-repeat来执行以下操作：

1. 对于每个属性，用户需要为每个Feed创建一个新标签的每个Feed



2. 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:

1. For each feed a user needs to configure a new tab is created

2. 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屋！