テーブル内の複数の角度ブートストラップ日付ピッカーコンポーネントを表示

Question

私はテーブルを持っている：

<table class="table " id="Table" width="100%"> 
    <thead> 
     <tr> 
     <th>ID</th> 
     <th>From</th> 
     <th>To</th> 
     <th>Total</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="id in inputID"> 
     <td class="col-md-1"> {{ id }} </td> 
     <td class="col-md-5"> 
      <div class="form-group"> 
      <div class="col-sm-10"> 
       <p class="input-group"> 
       <input type="text" class="form-control" datetime-picker="dd/MM/yyyy HH:mm" ng-model="ctrl.picker4.date" is-open="ctrl.picker4.open" datepicker-options="ctrl.picker4.datepickerOptions" save-as="json"/> 
       <span class="input-group-btn"> 
        <button type="button" class="btn btn-default" ng-click="ctrl.openCalendar($event, 'picker4')"><i class="fa fa-calendar"></i></button> 
       </span> 
       </p> 
      </div> 
      </div> 

     </td> 
     <td class="col-md-5"> 
      <div class="form-group"> 
      <div class="col-sm-10"> 
       <p class="input-group"> 
       <input type="text" class="form-control" datetime-picker="dd/MM/yyyy HH:mm" ng-model="ctrl.picker5.date" is-open="ctrl.picker5.open" datepicker-options="ctrl.picker5.datepickerOptions" initialPicker='time' save-as="json" /> 
       <span class="input-group-btn"> 
        <button type="button" class="btn btn-default" ng-click="ctrl.openCalendar($event, 'picker5')"><i class="fa fa-calendar"></i></button> 
       </span> 
       </p> 
      </div> 
      </div> 
     </td> 
     <td class="col-md-1"> 
      <p class="form-control-static">{{ ctrl.timeRange }} (minutes)</p> 
     </td> 
     </tr> 
    </tbody> 
    </table> 

私はテーブルのセルの一つでDatepicker from Angular UI Bootstrapを使用しています。 1つの行のカレンダーアイコンをクリックして1日を選択すると、すべての行が日付ピッカーの値を表す文字列値に置き換えられます。

http://plnkr.co/edit/59KKPq?p=preview

Answer 1

あなたは、分離株スコープを持つディレクティブにあなたの日付ピッカーを移動することができます。それは他のものの影響を受けないコンポーネントになります。左のものはコンポーネントを使用し、独立して動作することをPlunkerで http://plnkr.co/edit/K0eVeR?p=preview

注意：ここで

はあなたの例に基づいて作業Plunkerです。右側のものは古い方法を使用し、したがって互いに干渉します。私は追加

メインコードはJSである：

app.directive('myDatePicker', function() { 
return { 
    template: '<p class="input-group">'+ 
    '<input ng-init="isOpen=false" type="text" class="form-control" datetime-picker="dd/MM/yyyy HH:mm" ng-model="date" is-open="isOpen" datepicker-options="datepickerOptions" save-as="json"/>' + 
    '<span class="input-group-btn">' + 
    '<button type="button" class="btn btn-default" ng-click="isOpen=!isOpen"><i class="fa fa-calendar"></i></button>' + 
    '</span></p>', 
    restrict: 'E', 
    scope: { 
     date: "=", 
     datepickerOptions: "=" 
    } 
    }; 
});