Dynamic ng-model binding ng-repeat loop in AngularJS

Question

I have a following collection of fields.

$scope.fields = ['name','postcode','phone'];

I need to have input controls dynamically generated as many as the fields above. So a fixed version of below

<div class="col-sm-3" ng-repeat="user in users">
    <div ng-repeat="field in fields">
        <input class="form-control" ng-model="user.field" /> <!-- .field isn't resolving -->
    </div>
</div>

would hopefully generate something like below...

<div class="col-sm-3" ng-repeat="user in users">
    <div><input class="form-control" ng-model="user.name" /></div>
    <div><input class="form-control" ng-model="user.postcode" /></div>
    <div><input class="form-control" ng-model="user.phone" /></div>
</div>

Any ideas? Thanks!

where is user coming from? field is not a property of user in the example you are giving so it won't work.. — deowk
– deowk, Commented May 8, 2015 at 21:29
@deolectrix Angular will create necessary missing properties if they are requested. — dfsq
– dfsq, Commented May 8, 2015 at 21:30
@dfsq thanks, my mistake, you learn something new every day...;) — deowk
– deowk, Commented May 8, 2015 at 21:34

dfsq · Accepted Answer · 2015-05-08 21:35:24Z

6

You need to use bracket notation to access variable object property:

<div class="col-sm-3" ng-repeat="user in users">
    <div ng-repeat="field in fields">
        <input class="form-control" ng-model="user[field]" />
    </div>
</div>

Demo: http://plnkr.co/edit/fkCYr4k0RwizxsOS9HhC?p=preview

edited May 8, 2015 at 21:35

answered May 8, 2015 at 21:29

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

4 Comments

DocZ Over a year ago

Bracket notation is what I was looking for! Thank you!

jme11 Over a year ago

I guess it should be ng-model="user['{{field}}']" no?

dfsq Over a year ago

@jme11 No, inside of expression it would be literally property of the user with the key '{{field}}' and without quotes user[{{field}}] it would be exception. There is a demo in the answer, just try yourself ans check results.

jme11 Over a year ago

Cool, didn't notice the demo before, but it makes sense.

Collectives™ on Stack Overflow

Dynamic ng-model binding ng-repeat loop in AngularJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related