ng-repeat中的AngularJS DatePicker

Question

我试图让datepickers使用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>