Angular.js ng-repeat w wielu tr

125

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

thegreenpizza
źródło

Odpowiedzi:

169

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!

Gloopy
źródło
Fantastyczny. Miałem ten sam problem i właściwie debatowałem nad tym, ale myślałem, że to nigdy nie zadziała po prostu iterując tag tbody. Dzięki!
KhalilRavanna
12
Teraz jest trochę później, ale Angular 1.2 wprowadził dyrektywy ng-repeat-start i ng-repeat-end, aby umożliwić iterację wielu elementów.
Onite
1
@Onite Jest teraz znacznie później i używam AS 1.5, ale nie wiedziałem o dodanej funkcjonalności -end i -start ng-repeat. Wskazałeś mi tam, więc nigdy nie przepraszaj za dodanie informacji do odpowiedzi.
Neville
1
Adres URL dokumentacji powtórzeń ng jest nieprawidłowy, ale zmiana nie obejmuje więcej niż sześciu znaków, więc nie mogę jej edytować bez dodania bezużytecznej edycji meta. Prawidłowy adres URL powinien mieć postać docs.angularjs.org/api/ng/ dyrektywa / ngRepeat
Bill Rawlinson
35

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.

Anson
źródło
Wspomina o tym w transmisji na żywo ze spotkania Angular z 11 czerwca 2013 r. Nie mogę się doczekać tej i innych funkcji w Angular 1.1.5+ i Angular 2.0.
thegreenpizza
Wskazuję na wersję 1.1.5 na cdnjs cdn i to nie działa. //cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js czy wiesz, w jakiej wersji to ma być dostępne?
Shanimal,
Prawidłowo, nie został wydany w wersji 1.1.5, więc obejrzyj 1.1.6 (lub prawdopodobnie 1.2.0), aby wkrótce wylądować. Oto zobowiązanie Miško do obejrzenia przed wydaniem: github.com/angular/angular.js/commit/ ...
Anson,
Dobrze też zauważyć, że działa to dla każdej dyrektywy, nie tylko ngRepeat;)
7hi4g0
4

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));
phanf
źródło
0

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>
Jeff Tian
źródło