AngularJS: ng-model inside ng-repeat?

angularjs angularjs-directive angularjs-ng-repeat

37,364

Solution 1

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

Solution 2

It should be:

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

Solution 3

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

37,364

502502

Updated on July 09, 2022

Comments

502502 almost 2 years
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'.
holographic-principle almost 11 years

You need to create $scope.person = { customfields: {} }; @Finnayra
vorburger almost 11 years

I've extended the jsfiddle 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)
zs2020 almost 11 years

@vorburger Updated. Please try.
vorburger almost 11 years

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. and it still works - am I missing something? PS: I'll update my related problem.
zs2020 almost 11 years

@vorburger I am using Safari. Without doing No.1, I saw 3 alerts shown at the same time. Maybe it works on other browsers.
vorburger almost 11 years

yeah, probably (I've tried on Chrome). PS: As my Fiddle #7 illustrates, there is still an issue if input type is dynamic..
avi almost 11 years

I have not tried this but I have working code for kind of similar case. Filtering based on property (name selected from dropdown)
502502 almost 11 years

Thank you! This is what I needed! Much appreciated :)
502502 almost 11 years

Thanks @finishingmove
nre almost 11 years

Note that wrapping each input in a <form /> 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.
smartmeta over 10 years

You should describe the solution.
jdnew18 about 7 years

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.