帶ng-repeat的動態ng模型

我想動態創建一些輸入字段，我使用ng-repeat和ng-model。我遇到了一些問題。 ng-model沒有ng-repeat正常工作（transitPointStart）。 transits應該工作完全一樣，但他們不。我錯過了什麼？（鏈接到plunker在底部）帶ng-repeat的動態ng模型

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>

轉變：

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

控制器：

$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; 
    };

演示：Plunker

來源

2016-05-03 ulou

什麼在您的演示不起作用？這一切似乎都很好。 – Matheno

你能解釋一下'你不工作'是什麼意思嗎？ –

它看起來像openCalendar不工作在闖入者，因爲我錯過了什麼。但每次當我點擊按鈕添加中轉，日曆打開。還有什麼，爲什麼添加後填充輸入？ – ulou

您的HTML中的某些綁定不正確。無論何時需要將模型中的數據發送到HTML，都需要使用插值（{{ }}格式）。

例如，分配ID時，您有：

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

這應該是：

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

其次，你的ng-click語法是不正確的。你不應該建立在JavaScript中openCalendar表達，但在你的HTML，像這樣：

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

我覺得你Plnkr缺少某些腳本和/或步驟，以日曆的工作，但這些變化至少會引起你的openCalendar函數被調用。

來源

2016-05-03 13:02:41

帶ng-repeat的動態ng模型

回答

相關問題