Отображение нескольких компонентов Угловой Bootstrap Datepicker в таблице

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 основана на вашем примере: 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: "=" 
    } 
    }; 
});