Angular.js ng-repeat w wielu tr

Używam Angular.js dla aplikacji, która używa ukrytych trs do symulacji efektu wysuwania, pokazując tr i przesuwając w dół div w td poniżej. Ten proces działał fantastycznie, używając knockout.js podczas iteracji po tablicy tych wierszy, ponieważ mogłem użyć <!-- ko:foreach -->obu elementów tr.

Z angular, ng-repeatnależy zastosować do elementu html, co oznacza, że ​​nie mogę powtórzyć tych podwójnych wierszy przy użyciu standardowych metod. Moją pierwszą odpowiedzią na to było utworzenie dyrektywy reprezentującej te podwójne tr, ale to nie wyszło, ponieważ szablony dyrektyw muszą mieć jeden element główny, ale mam dwa ( <tr></tr><tr></tr>).

Jeśli ktoś z doświadczeniem z powtarzaniem ng i angularem, który złamał to, może wyjaśnić, jak rozwiązać ten problem, byłbym bardzo wdzięczny.

(Powinienem również zauważyć, że dołączanie ng-repeatdo tbody jest opcją, ale daje to wiele tbodys, i zakładam, że jest to zła forma dla standardowego HTML, chociaż popraw mnie, jeśli się mylę)

Używanie ng-repeatna tbodywydaje się być prawidłowe, zobacz ten post .

Również szybki test za pomocą walidatora HTML pozwolił na użycie wielu tbodyelementów w tej samej tabeli.

Aktualizacja: Od co najmniej Angular 1.2 jest ng-repeat-starti ng-repeat-endpozwalający na powtarzanie serii elementów. Zobacz dokumentację, aby uzyskać więcej informacji i dziękuję @Onite za komentarz!

Deweloper AngularJS @ igor-minar odpowiedział na to pytanie w Angular.js ng-repeat w wielu elementach .

Miško Hevery niedawno wdrożył odpowiednie wsparcie za pośrednictwem ng-repeat-starti ng-repeat-end. To ulepszenie nie zostało wydane w wersji 1.0.7 (wersja stabilna) i 1.1.5 (wersja niestabilna).

Aktualizacja

Jest to teraz dostępne w wersji 1.2.0rc1. Sprawdź oficjalne dokumenty i ten screencast autorstwa Johna Lindquista.

Posiadanie wielu elementów może być prawidłowe, ale jeśli próbujesz zbudować przewijalną siatkę ze stałymi nagłówkami / stopkami, poniższe czynności nie zadziałają. W tym kodzie przyjęto następujący kod CSS, jquery i AngularJS.

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 do budowania stałego nagłówka / stopki dla przewijalnej siatki tabeli

#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 do powiązania poziomego przewijania tbody, to nie działa, ponieważ tbody powtarza się podczas powtarzania ng.

$(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));

Możesz to zrobić w ten sposób, co pokazałem w tej odpowiedzi: 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>