Pertanyaan AngularJS DatePicker dalam ng-repeat


Saya mencoba membuat datepicker ditampilkan dalam tabel menggunakan ng-repeat. Saya memiliki tanggal mulai dan tanggal akhir. Ketika saya mencoba untuk menampilkan kedua datepickers, mereka menampilkan satu di atas yang lain. Di bawah ini adalah kode saya dan screenshot dari apa yang terjadi.

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

Screenshot

enter image description here

Ini cepat plunkr contoh.

Saya tahu mereka berdua membuka ketika tombol terbuka diklik tetapi jika Anda bisa membantu menjelaskan mengapa mereka muncul di kolom yang sama dari tabel.


4
2018-06-26 17:35


asal


Jawaban:


Ini ada hubungannya dengan bagaimana bootstrap menata input-grup. Anda tidak perlu menempatkan kelas itu di td. Coba pindahkan ke level seperti ini:

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

6
2018-06-26 18:51