AngularJS ng-repeat 中的 DatePicker

Question

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

<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 示例。

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

Answer 1

它与 bootstrap 如何设置输入组的样式有关。您不需要将 class 放在 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>

AngularJS ng-repeat 中的 DatePicker

AngularJS DatePicker in ng-repeat

datepicker

angularjs