Angularjs 在表中显示多个角度引导数据选择器组件

我有一张桌子：

<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>

身份证件
从…起
到
全部的
{{id}




{{ctrl.timeRange}（分钟）

我正在一个表格单元格中使用。 当我单击一行中的日历图标并选择一天时，所有行都将替换为表示日期选择器值的字符串值

---

您可以将日期选择器移动到具有隔离作用域的指令中。这将使它成为一个不会受其他组件影响的组件

以下是一个基于您的示例的工作Plunker：

请注意，在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: "="
    }
  };
});

app.directive（'myDatePicker'，function（）{
返回{
模板：'
'+
'' +
'' +
'' +
“
”，
限制：'E'，
范围：{
日期：“=”，
datepickerOptions:“=”
}
};
});