angularjs - 在表格中显示多个 Angular Bootstrap Datepicker 组件

Question

我有一张 table :

<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: "="
    }
  };
});