角度ブートストラップを使用して動的に追加された日付時間ピッカーは動作しません

Question

date time pickerを使用しました。私はそれを静的として使用するとうまく動作します。私は入力フィールドを動的に追加するとき、それを動作させる方法。 Htmlの

<div class="form-group" ng-repeat="item in items"> 
     <div class="row" style="margin: 15px 0px;"> 
      <div class="col-md-6 col-lg-6 col-sm-6" style="padding-left:0"> 

       <label>Start Date</label> 
       <p class="input-group"> 
        <input type="text" class="form-control" datetime-picker="dd/MM/yyyy" enable-time="false" ng-model="item['start_date'+$index]" is-open="['start_date'+$index].open" /> 

        <span class="input-group-btn"> 
         <button type="button" class="btn btn-default" ng-click="openCalendar($event, 'start_date',$index)"><i class="fa fa-calendar"></i></button> 
        </span> 
       </p> 

      </div> 
     </div> 
</div> 
    <button ng-click="add()">Add New Row</button> 

コントローラ

  $scope.items = []; 
    $scope.add = function() { 
     $scope.items.push({ 
      start_date:"", 
     }); 
    } 
    $scope.openCalendar = function(e,picker,index) { 
     console.log('index',index); 
      console.log('picker',picker); 
     var picker_index=picker+index; 
     console.log($scope[picker_index]) 
     $scope.[picker_index]open = true; 
     console.log($scope[picker][index]) 
    }; 

plunker here

私はNG-モデルからインデックス値を使用して、特定の日付ピッカーを開くことができないですし、あるオープン属性。 datepickersが動的に追加されているためです。誰でも私にこれを助けてもらえますか？

Answer 1

すべてのisOpenに対して新しい変数を作成し、ng-clickでtrueにします。 http://plnkr.co/edit/dSqX4O?p=preview

<div class="form-group" ng-repeat="item in items"> 
    <div class="row" style="margin: 15px 0px;"> 
     <div class="col-md-6 col-lg-6 col-sm-6" style="padding-left:0"> 

      <label>Start Date</label> 
      <p class="input-group"> 
       <input type="text" class="form-control" datetime-picker="dd/MM/yyyy" enable-time="false" ng-model="item['start_date'+$index]" is-open="isOpen1" /> 

       <span class="input-group-btn"> 
        <button type="button" class="btn btn-default" ng-click="isOpen1= true")"><i class="fa fa-calendar"></i></button> 
       </span> 
      </p> 

     </div> 
    </div> 

新しい行

var app = angular.module('app', ['ui.bootstrap', 'ui.bootstrap.datetimepicker']); 

app.controller（ 'MyController'、[ '$スコープ' 機能（$スコープを）{追加更新plunkrそれを、それは に役立ちます参照してください

// $scope.openCalendar = function(e,index, picker) { 
// console.log('index',index) 
// $scope.isOpen1.index=false; 
// // $scope[picker][index].open = true; 
// }; 
    $scope.items = []; 
    $scope.add = function() { 
     $scope.items.push({ 
      start_date:"", 


     }); 
    } 

}]）;