creating dynamic forms using ng-repeat

问题:

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?

回答1:

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.