AngularJS: ng-model inside ng-repeat?

Question

I'm trying to generate form inputs with ng-repeat. Note: 'customFields' is an array of field names: ["Age", "Weight", "Ethnicity"].

 <div class="control-group" ng-repeat="field in customFields">
   <label class="control-label">{{field}}</label>
     <div class="controls">
       <input type="text" ng-model="person.customfields.{{field}}" />
     </div>
 </div>

What is the best/correct way to set 'ng-model'? I would like to send it to the server as person.customfields.'fieldname' where fieldname comes from 'field in customFields'.

zs2020 · Accepted Answer · 2013-07-25T23:03:25.997

29

<div ng-app ng-controller="Ctrl">
    <div class="control-group" ng-repeat="field in customFields">
        <label class="control-label">{{field}}</label>
        <div class="controls">
            <input type="text" ng-model="person.customfields[field]" />
        </div>
    </div>
    <button ng-click="collectData()">Collect</button>
</div>

function Ctrl($scope) {
    $scope.customFields = ["Age", "Weight", "Ethnicity"];
    $scope.person = {
        customfields: {
            "Age": 0,
                "Weight": 0,
                "Ethnicity": 0
        }
    };

    $scope.collectData = function () {
        console.log($scope.person.customfields);
    }
}

You can try it here.

Updated:

For the validation, the trick is to put <ng-form> inside the repeater. Please try.

edited Jul 25 '13 at 23:03

answered Jul 25 '13 at 22:38

zs2020

53,766
29
154
219

I've [extended the jsfiddle](http://jsfiddle.net/vorburger/jqbGf/1/) including required Field Validation, but that doesn't work.. do you have any idea how to get that working? Assuming all fields required just for the sake of example; could be read from model, but that's irrelevant to illustrating the problem. This is very similar to [my related problem (which has more flexible custom field 'path' in addition)](http://stackoverflow.com/questions/17841915/angularjs-ng-model-form-driven-by-ng-repeat-over-ui-model-description-data-how-t) – vorburger Jul 25 '13 at 22:51
1

@vorburger Updated. Please try. – zs2020 Jul 25 '13 at 23:03
That works - you're a genius!! ;) However, I've noticed that you have 1. switched to nested ng-form, and 2. fixed escaping in ng-show using myForm['\{\{field\}\}'].$error.required... out of curiosity I've [reverted 1. and kept 2.](http://jsfiddle.net/vorburger/jqbGf/4/) and it still works - am I missing something? PS: I'll update my related problem. – vorburger Jul 25 '13 at 23:20
1

@vorburger I am using Safari. Without doing No.1, I saw 3 alerts shown at the same time. Maybe it works on other browsers. – zs2020 Jul 25 '13 at 23:23
yeah, probably (I've tried on Chrome). PS: As my [Fiddle #7](http://jsfiddle.net/vorburger/8CxRC/7/) illustrates, there is still an issue if input type is dynamic.. – vorburger Jul 26 '13 at 00:54
Note that wrapping each input in a `
` is required because AngularJS (as of version 1.1.5) does not resolve the `name` attribute against the current scope. Thus, it attaches the input to the form controller as `{{field}}`, rather than evaluating `{{ field }}` to the actual field name. – nre Aug 05 '13 at 15:04

score 6 · Answer 2 · edited Jul 25 '13 at 18:40

6

It should be:

<input type="text" ng-model="person.customfields[field]" />

edited Jul 25 '13 at 18:40

toro2k

19,020
7
64
71

answered Jul 25 '13 at 18:23

Ajay Beniwal

18,857
9
81
99

5

You need to create `$scope.person = { customfields: {} };` @Finnayra – holographic-principle Jul 25 '13 at 22:26

Akr · Answer 3 · 2013-10-27T12:36:36.717

4

Any on who ends up here For ng-model inside ng-repeat

http://jsfiddle.net/sirhc/z9cGm/

the above link has good description on how to use it with examples

edited Oct 27 '13 at 12:36

answered Oct 27 '13 at 12:04

Akr

41
4

2

You should describe the solution. – smartmeta Oct 27 '13 at 12:25
Akr should indeed describe the solution, but Akr's jsfiddle example itself is absolutely fantastic and informative. Basically, bind to any array of objects which themselves contain the desired objects. – jdnew18 Apr 26 '17 at 16:34

score -1 · Answer 4 · answered Jul 25 '13 at 23:47

-1

Try this ng-model="person.customfields."{{field}} Moved the double quotes

answered Jul 25 '13 at 23:47

avi

178
2
9

I have not tried this but I have working code for kind of similar case. Filtering based on property (name selected from dropdown) – avi Jul 26 '13 at 02:39

AngularJS: ng-model inside ng-repeat?

4 Answers4

Linked