AngularJS ng-repeat für Eingabe-Array

Question

Ich habe leer Modelle mit Autos:

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

Dann benutze ich ng-Wiederholung zu erzeugen Autos bilden:

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

Aber das funktioniert nicht. Wie kann ich KEY in ng-model array einfügen?

Answer 1

Verwenden Interpolationsoperator nicht ({{..}}) innerhalb Winkel Umfang (so etwas wie ng-*), In Ihrem Fall 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> 

Answer 2

Sie müssen nur die Interpolation {{}} entfernen, die den Schlüssel enthält. Sie können dies nicht mit eckigen Anweisungen verwenden.

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

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