AngularJS ng-repeat for input array

Question

I have empty model with cars:

$scope.registration.cars = {
    1: {
        capacity: '',
        count: '',
        license: ''
    },
    2: {
        capacity: '',
        count: '',
        license: ''
    }
};

Then I use ng-repeat to generate cars form:

<div class="row row_vehicles" ng-repeat="(key, value) in registration.cars">
    <input type="number" name="registration_car_capacity[{{key}}]" ng-model="registration.car[{{key}}].capacity" />
    <input type="number" name="registration_car_count[{{key}}]" ng-model="registration.car[{{key}}].count" required />
    <input type="text" name="registration_car_license[{{key}}]" ng-model="registration.car[1].license" ng-minlength="7" required />
</div>

But this is not working. How can I insert KEY into ng-model array?

Remove {{}} on the name and nd-model attributes like ng-model="registration.car[key].capacity" — daan.desmedt
– daan.desmedt, Commented Jun 23, 2017 at 14:12
@general666 you should consider who answered first while upvoting and answering . :( — Vivz
– Vivz, Commented Jun 23, 2017 at 15:05

anoop · Accepted Answer · 2017-06-23 14:09:16Z

2

Don't use interpolation operator ({{..}}) inside angular scope.(anything like ng-*), In your case ng-model

<div class="row row_vehicles" ng-repeat="(key, value) in registration.cars">
    <input type="number" name="registration_car_capacity[key]" ng-model="registration.car[key].capacity" />
    <input type="number" name="registration_car_count[key]" ng-model="registration.car[key].count" required />
    <input type="text" name="registration_car_license[key]" ng-model="registration.car[key].license" ng-minlength="7" required />
</div>

answered Jun 23, 2017 at 14:09

anoop

3,8222 gold badges18 silver badges28 bronze badges

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

1 Comment

general666 Over a year ago

Thanak you for solution ;)

Vivz · Accepted Answer · 2017-06-23 15:06:07Z

2

You just have to remove interpolation {{}} enclosing the key. You can't use this with angular directives.

<div ng-controller="MyCtrl">
    <div class="row row_vehicles" ng-repeat="(key, value) in registration.cars">
        <input type="number" name="registration_car_capacity[key]"
        ng-model="registration.cars[key].capacity"
        />
        <input type="number" name="registration_car_count[key]"
        ng-model="registration.cars[key].count"
        required />
        <input type="text" name="registration_car_license[key]"
        ng-model="registration.cars[key].license"
        ng-minlength="7" required /> 
    </div>
</div>

Working Fiddle: http://jsfiddle.net/ADukg/12094/

edited Jun 23, 2017 at 15:06

answered Jun 23, 2017 at 14:08

Vivz

6,6282 gold badges19 silver badges34 bronze badges

Collectives™ on Stack Overflow

AngularJS ng-repeat for input array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related