ng-repeat 中的 AngularJS DatePicker

Question

我试图让日期选择器使用 ng-repeat 显示在表格中。我有一个开始日期和结束日期。当我尝试显示两个日期选择器时，它们会显示一个而不是另一个。下面是我的代码和正在发生的事情的屏幕截图。

<table datatable="ng" dt-options="dtOptions" dt-columns="dtColumns" class="table table-bordered">
    <tbody>
        <tr ng-repeat="waiver in model.waivers" >
               <td class="input-group">
                <input class="form-control" type="text" datepicker-popup="MM/dd/yyyy" ng-model="waiver.StartDate" is-open="waiver.isOpen" close-text="Close" />
                <span class="input-group-btn">
                    <button class="btn btn-default" ng-click="open($event, waiver)"><i class="fa fa-calendar"></i></button>
                </span>
            </td>
            <td class="input-group">
                <input class="form-control" type="text" datepicker-popup="MM/dd/yyyy" ng-model="waiver.EndDate" is-open="waiver.isOpen" close-text="Close" />
                <span class="input-group-btn">
                    <button class="btn btn-default" ng-click="open($event, waiver)"><i class="fa fa-calendar"></i></button>
                </span>
            </td>
            <td><input type="text" ng-model="waiver.FuelCap" /></td>
            <td><button type="button" ng-click="updateWaiver(waiver)" class="btn btn-warning"><i class="fa fa-refresh"></i></button></td>
            <td><button type="button" ng-click="removeWaiver(waiver)" class="btn btn-danger"><i class="fa fa-trash-o"></i></button></td>
        </tr>
    </tbody>
</table>  

截屏



这是一个快速 plunkr例子。

我知道当单击打开按钮时它们都在打开，但是如果您能帮助解释为什么它们出现在表格的同一列中。

Answer 1

它与 bootstrap 如何设置输入组的样式有关。您不需要将该类放在 td 上。尝试将其向下移动一个级别:

      <td>
        <div class="input-group">
          <input class="form-control" type="text" datepicker-popup="MM/dd/yyyy" ng-model="waiver.StartDate" is-open="waiver.isOpen" close-text="Close" />
          <span class="input-group-btn">
            <button class="btn btn-default" ng-click="open($event, waiver)">open</button>
          </span>
        </div>
      </td>
      <td>
        <div class="input-group">
          <input class="form-control" type="text" datepicker-popup="MM/dd/yyyy" ng-model="waiver.EndDate" is-open="waiver.isOpen" close-text="Close" />
          <span class="input-group-btn">
            <button class="btn btn-default" ng-click="open($event, waiver)">open</button>
          </span>
        </div>
      </td>