顯示多角度引導日期選擇器組件表中的

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在表格單元格中的一個。 當我單擊一行中的日曆圖標並選擇一天時，則所有行都將替換爲表示日期選擇器值的字符串值。

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

Answer 1

您可以將您的日期選擇爲指令與分離的範圍。這將使其成爲不會受到其他人影響的組件。

這是基於你的榜樣工作Plunker：在Plunker http://plnkr.co/edit/K0eVeR?p=preview

注意，左邊的那些使用組件和獨立工作。右邊的使用舊的方式，因此互相干擾。

我添加的主要代碼是在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: "=" 
    } 
    }; 
});