How to dynamically generate form fields with angular?

Question

I have an array containing a list of my backend fields for some model

ie:

$scope.fields = ['username', 'password', 'email', ...];

How can I do the following with angular:

<div ng-repeat="field in fields">
   <div class="form-group">
        <label class="col-sm-2 control-label">{{field }} </label>
        <div class="col-sm-10">
              <input class="form-control" 
                     type="text" 
                     required
                     ng-model="new_entry.{{field}}"/>
        </div>
    </div>
</div>

dave · Accepted Answer · 2014-07-16 18:52:09Z

1

You should be able to set the model like this:

ng-model="new_entry[field]"

Just as you can access any object property using [] syntax:

If you have

x = { name: 'Joe', age: 24 }

You can access a property by doing

x.name

Or by doing

x['name']

http://jsfiddle.net/WN2dc/1

edited Jul 16, 2014 at 18:52

answered Jul 16, 2014 at 18:24

dave

65.1k6 gold badges81 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

TheOne Over a year ago

So angular assigns the output of a input field to whatever you place into ng-model? It would seem that the only magic that happens is the first step of creating x.

dave Over a year ago

Yes, angular assigns the output of a input field to whatever you place into ng-model. The magic is that you can also change x in the javascript, and the input field updates automatically too. It's two way data-binding, instead of one way.

TheOne Over a year ago

Can you create a fiddle of the above. I don't think it works as you expect it to.

dave Over a year ago

Fiddle added to answer

TheOne Over a year ago

Sorry it does work: jsfiddle.net/WN2dc/4. I must be doing something else wrong.

|

Collectives™ on Stack Overflow

How to dynamically generate form fields with angular?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related