Dynamisches ng-Modell mit ng-repeat

Question

Ich möchte dynamisch einige Eingabefelder erstellen, die ich ng-repeat mit ng-model verwendet habe. Ich treffe ein paar Probleme. ng-model ohne ng-repeat funktioniert ordnungsgemäß (transitPointStart). transits sollte genau das gleiche funktionieren, aber sie nicht. Was vermisse ich? (Link auf der Unterseite Plunker)

transitPointStart:

 <div class="col-lg-6"> 
       <div class="form-group"> 
        <label class="control-label" for="field_start">Start Point</label> 
        <input type="text" class="form-control" name="field_start" id="field_start" 
          ng-model="transitPointStart.city" placeholder="e.g. London" 
        /> 
       </div> 
      </div> 
      <div class="col-lg-6"> 
       <div class="form-group"> 
        <label class="control-label" for="field_start_date">Date</label> 
        <div class="input-group"> 
         <input id="field_start_date" type="text" class="form-control" placeholder="YYYY-MM-DD HH:MM" 
           name="field_start_date" 
           datetime-picker="{{dateformat}}" ng-model="transitPointStart.date" 
           is-open="datePickerOpenStatus.field_start_date" 
         /> 
         <span class="input-group-btn"> 
          <button type="button" class="btn btn-default" 
            ng-click="openCalendar('field_start_date')"><i 
           class="glyphicon glyphicon-calendar"></i></button> 
         </span> 
        </div> 
       </div> 
      </div> 

Transits:

<div class="row" ng-repeat="transit in transits"> 

      <!--TEST--> 
      <!--<div> Model: {{transit.modelName}} </div>--> 
      <!--<div> dateModel: {{transit.dateModelName}} </div>--> 
      <!--<div> datePicker: {{transit.datePickerName}} </div>--> 
      <!--<div> fieldName: {{transit.fieldName}} </div>--> 
      <!--<div> fieldDateName: {{transit.fieldDateName}} </div>--> 
      <!--<div> button: {{transit.buttonDateName}} </div>--> 
      <!--/TEST--> 

      <div class="col-lg-6"> 
       <div class="form-group"> 
        <label class="control-label" for="transit.fieldName">Transit {{$index+1}}</label> 
        <input type="text" class="form-control" name="transit.fieldName" id="transit.fieldName" 
          ng-model="transit.modelName" placeholder="transit" 
        /> 
       </div> 
      </div> 
      <div class="col-lg-6"> 
       <div class="form-group"> 
        <label class="control-label" for="transit.fieldDateName">Date {{$index+1}}</label> 
        <div class="input-group"> 
         <input id="transit.fieldDateName" type="text" class="form-control" placeholder="e.g" 
           name="transit.fieldDateName" 
           datetime-picker="{{dateformat}}" ng-model="transit.dateModelName" 
           is-open="transit.datePickerName" 
         /> 
         <span class="input-group-btn"> 
          <button type="button" class="btn btn-default" 
            ng-click="transit.buttonDateName"><i 
           class="glyphicon glyphicon-calendar"></i></button> 
         </span> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-lg-2"></div> 
      <div class="col-lg-2"> 
       <span class="btn btn-primary" ng-click="addTransit()" ng-if="transits.length < 3">Add transit</span> 
      </div> 
      <div class="col-lg-2"></div> 
     </div> 

Controller:

$scope.transits = []; 

    $scope.addTransit = function() { 
     var tempId = $scope.transits.length + 1; 
     var tempName = "transitPoint_" + tempId; 
     var tempModelName = tempName + ".city"; // Here I would like to have access to transitPoint.city 
     var tempDateName = tempName + ".date"; // as above (transitPoint.date) 
     var tempDate = "datePickerOpenStatus.field_transit_date_" + tempId; 
     var tempFieldName = "field_transit_" + tempId; 
     var tempFieldDateName = "field_transit_date_" + tempId; 
     var tempButton = "openCalendar('" + tempFieldDateName + "')"; 
     $scope.transits.push({ 
      modelName: tempModelName, 
      dateModelName: tempDateName, 
      datePickerName: tempDate, 
      fieldName: tempFieldName, 
      fieldDateName: tempFieldDateName, 
      buttonDateName: tempButton 
     }); 
    } 
    /* 
    {...} - rest of code, sending queries (vm.save() ect.) 
    */ 
    $scope.datePickerOpenStatus = {}; 
    $scope.datePickerOpenStatus.field_start_date = false; 
    $scope.datePickerOpenStatus.field_end_date = false; 
    // I should've used loop here 
    $scope.datePickerOpenStatus.field_transit_date_1 = false; 
    $scope.datePickerOpenStatus.field_transit_date_2 = false; 
    $scope.datePickerOpenStatus.field_transit_date_3 = false; 

    $scope.openCalendar = function (date) { 
     $scope.datePickerOpenStatus[date] = true; 
    }; 

Demo: Plunker

Answer 1

Einige der Bindungen in Ihrem HTML sind nicht korrekt. Sie müssen die Interpolation (das Format {{ }}) immer dann verwenden, wenn Sie Daten aus dem Modell in HTML ausgeben müssen.

Zum Beispiel, wenn IDs zuweisen, Sie haben:

<input id="transit.fieldDateName" type="text" class="form-control" placeholder="e.g" name="transit.fieldDateName" ... 

Dies sollte:

<input id="{{transit.fieldDateName}}" type="text" class="form-control" placeholder="e.g" name="{{transit.fieldDateName}}" ... 

Zweitens Ihre ng-click Syntax nicht korrekt ist. Sie sollten den openCalendar Ausdruck in JavaScript, aber in Ihrem HTML, wie so nicht erstellen:

<button type="button" class="btn btn-default" ng-click="openCalendar(transit.fieldDateName)"> 

Ich denke, Ihre Plnkr einige Skripte fehlen und/oder Schritte, um den Kalender Arbeit zu machen, aber diese Änderungen werden zumindest Ursache Ihre openCalendar Funktion wird aufgerufen.