Angular.js ng-repeat sur plusieurs tr's

Question

J'utilise Angular.js pour une application qui utilise des trs cachés pour simuler un effet de glissement vers l'extérieur en affichant le tr et en faisant glisser le div dans le td en dessous. Ce processus a fonctionné de manière fantastique en utilisant knockout.js lors de l'itération sur un tableau de ces lignes, parce que je pouvais utiliser les éléments suivants <!-- ko:foreach --> autour des deux éléments tr.

Avec angulaire, ng-repeat doit être appliquée à un élément html, ce qui signifie que je ne parviens pas à répéter ces doubles lignes à l'aide des méthodes standard. Ma première réaction a été de créer une directive pour représenter ces doubles lignes, mais cela n'a pas fonctionné car les modèles de directive doivent avoir un seul élément Root, mais j'en ai deux ( <tr></tr><tr></tr> ).

Si quelqu'un ayant de l'expérience avec ng-repeat et angular qui a craqué peut expliquer comment résoudre ce problème, je l'apprécierais grandement.

(Je dois également noter que le fait de joindre ng-repeat au tbody est une option, mais cela produit de multiples tbodys, et je suppose que c'est une mauvaise forme pour le HTML standard, mais corrigez-moi si je me trompe)

Answer 1

Utilisation de ng-repeat sur tbody semble être valide, voir ce poste .

Un test rapide à travers un validateur html autorisé plusieurs tbody dans le même tableau.

Mise à jour : Depuis au moins la version 1.2 d'Angular, il existe une fonction ng-repeat-start y ng-repeat-end pour permettre la répétition d'une série d'éléments. Voir la documentation pour plus d'informations et merci à @Onite pour le commentaire !

Answer 2

Le développeur AngularJS @igor-minar a répondu à cette question en Angular.js ng-repeat sur plusieurs éléments .

Miško Hevery a récemment mis en place un support approprié via ng-repeat-start y ng-repeat-end . Cette amélioration n'a pas été publiée dans les versions 1.0.7 (stable) et 1.1.5 (instable).

Mise à jour

Ceci est maintenant disponible dans la version 1.2.0rc1. Consultez le documents officiels y ce screencast par John Lindquist.

Answer 3

Le fait d'avoir plusieurs éléments peut être valable mais si vous essayez de construire une grille déroulante avec des en-têtes et des pieds de page fixes, le code suivant ne fonctionnera pas. Ce code suppose les CSS, jquery et AngularJS suivants.

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 pour construire un en-tête/pied de page fixe pour une grille de table déroulante

#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 pour lier le défilement horizontal de tbody, cela ne fonctionne pas car tbody se répète pendant 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));

Answer 4

Vous pouvez le faire de cette façon, comme je l'ai montré dans cette réponse : 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>