Angular.js ng-repeat di beberapa tr

Saya menggunakan Angular.js untuk aplikasi yang menggunakan trs tersembunyi untuk mensimulasikan efek geser keluar dengan menunjukkan tr dan menggeser ke bawah div di td di bawah. Proses ini bekerja dengan luar biasa menggunakan knockout.js saat melakukan iterasi pada larik baris ini, karena saya bisa menggunakan di <!-- ko:foreach -->sekitar kedua elemen tr.

Dengan sudut, ng-repeatharus diterapkan pada elemen html, yang berarti saya tidak dapat mengulangi baris ganda ini menggunakan metode standar. Tanggapan pertama saya untuk ini adalah membuat arahan untuk mewakili trs ganda ini, tetapi itu gagal karena templat direktif harus memiliki satu elemen root, tetapi saya memiliki dua ( <tr></tr><tr></tr>).

Jika ada yang berpengalaman dengan ng-repeat dan angular yang sudah crack ini bisa menjelaskan bagaimana mengatasi masalah ini, saya akan sangat berterima kasih.

(Saya juga harus mencatat bahwa melampirkan ng-repeatke tbody adalah sebuah opsi, tetapi ini menghasilkan banyak tbodys, dan saya berasumsi bahwa itu adalah bentuk yang buruk untuk HTML standar, meskipun perbaiki saya jika saya salah)

Menggunakan ng-repeatdi tbodytampaknya valid lihat posting ini .

Juga tes cepat melalui validator html memungkinkan beberapa tbodyelemen dalam tabel yang sama.

Pembaruan: Pada setidaknya Angular 1.2 ada ng-repeat-startdan ng-repeat-enduntuk memungkinkan pengulangan serangkaian elemen. Lihat dokumentasi untuk informasi lebih lanjut dan terima kasih kepada @Onite untuk komentarnya!

Pengembang AngularJS @ igor-minar menjawab ini di Angular.js ng-repeat di beberapa elemen .

Miško Hevery baru-baru ini menerapkan dukungan yang tepat melalui ng-repeat-startdan ng-repeat-end. Peningkatan ini belum dirilis mulai 1.0.7 (stabil) dan 1.1.5 (tidak stabil).

Memperbarui

Ini sekarang tersedia di 1.2.0rc1. Lihat dokumen resmi dan screencast ini oleh John Lindquist.

Memiliki beberapa elemen mungkin valid tetapi jika Anda mencoba membuat kisi yang dapat digulir dengan header / footer tetap, tindakan berikut tidak akan berfungsi. Kode ini mengasumsikan CSS, jquery dan AngularJS berikut.

HTML

<table id="tablegrid_ko">
        <thead>
            <tr>
                <th>
                   Product Title
                </th>
                <th>
                </th>
            </tr>
        </thead>

        <tbody ng-repeat="item in itemList">
            <tr ng-repeat="itemUnit in item.itemUnit">
                <td>{{itemUnit.Name}}</td>
            </tr>
        </tbody>
</table>

CSS untuk membuat header / footer tetap untuk kisi tabel yang dapat digulir

#tablegrid_ko {
    max-height: 450px;    
}
#tablegrid_ko
{
border-width: 0 0 1px 1px;
border-spacing: 0;
border-collapse: collapse;
border-style: solid;
}

#tablegrid_ko td, #tablegrid_ko th
{
margin: 0;
padding: 4px;
border-width: 1px 1px 0 0;
border-style: solid;
}


#tablegrid_ko{border-collapse:separate}
#tablegrid_ko tfoot,#tablegrid_ko thead{z-index:1}
#tablegrid_ko tbody{z-index:0}
#tablegrid_ko tr{height:20px}
#tablegrid_ko tr >td,#tablegrid_ko tr >th{
border-width:1px;border-style:outset;height:20px;
max-height:20px;xwidth:45px;xmin-width:45px;xmax-width:45px;white-space:nowrap;overflow:hidden;padding:3px}

#tablegrid_ko tr >th{
background-color:#999;border-color:#2c85b1 #18475f #18475f #2c85b1;color:#fff;font-weight:bold}
#tablegrid_ko tr >td{background-color:#fff}
#tablegrid_ko tr:nth-child(odd)>td{background-color:#f3f3f3;border-color:#fff #e6e6e6 #e6e6e6 #fff}
#tablegrid_ko tr:nth-child(even)>td{background-color:#ddd;border-color:#eaeaea #d0d0d0 #d0d0d0 #eaeaea}

div.scrollable-table-wrapper{
background:#268;border:1px solid #268;
display:inline-block;height:285px;min-height:285px;
max-height:285px;width:550px;position:relative;overflow:hidden;padding:26px 0}

div.scrollable-table-wrapper table{position:static}
div.scrollable-table-wrapper tfoot,div.scrollable-table-wrapper thead{position:absolute}
div.scrollable-table-wrapper thead{left:0;top:0}
div.scrollable-table-wrapper tfoot{left:0;bottom:0}
div.scrollable-table-wrapper tbody{display:block;position:relative;overflow-y:scroll;height:283px;width:550px}

Jquery untuk mengikat scrolling horizontal tbody, ini tidak berfungsi karena tbody berulang selama ng-repeat.

$(function ($) {

$.fn.tablegrid = function () {


        var $table = $(this);
        var $thead = $table.find('thead');
        var $tbody = $table.find('tbody');
        var $tfoot = $table.find('tfoot');

        $table.wrap("<div class='scrollable-table-wrapper'></div>");

        $tbody.bind('scroll', function (ev) {
            var $css = { 'left': -ev.target.scrollLeft };
            $thead.css($css);
            //$tfoot.css($css);
        });


    }; // plugin function



}(jQuery));

Anda dapat melakukannya dengan cara ini, seperti yang saya tunjukkan dalam jawaban ini: https://stackoverflow.com/a/26420732/769900

<tr ng-repeat="m in myData">
   <td>{{m.Name}}</td>
   <td>{{m.LastName}}</td>

   <td ng-if="$first" rowspan="{{myData.length}}">
       <ul>
           <li ng-repeat="d in days">
               {{d.hours}}
           </li>
       </ul>
   </td> 
</tr>