web-dev-qa-db-fra.com

Angular.js ng-repeat à travers plusieurs tr

J'utilise Angular.js pour une application qui utilise très caché pour simuler un effet de glissement en montrant le tr et en glissant le div dans le td ci-dessous. Ce processus fonctionnait à merveille en utilisant knockout.js lors de l'itération d'un tableau de ces lignes, car je pouvais utiliser <!-- ko:foreach --> autour des deux éléments tr.

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

Si quelqu'un avec de l'expérience avec ng-repeat et angular qui a craqué cela peut expliquer comment résoudre ce problème, je vous en serais très reconnaissant.

(Je devrais également noter que joignant ng-repeat à tbody est une option, mais cela produit plusieurs tbodys, et je suppose qu’il s’agit d’une mauvaise forme pour le format HTML standard, bien que corrigez-moi si je me trompe)

javascripthtmlangularjs
124
thegreenpizza

En utilisant ng-repeat sur tbody semble être valide voir cet article .

De plus, un test rapide à travers un validateur html a permis à plusieurs éléments tbody de se retrouver dans la même table.

Mise à jour: À partir de Angular 1.2, il y a un ng-repeat-start et ng-repeat-end pour permettre de répéter une série d’éléments. Voir la documentation pour plus d'informations et merci à @Onite pour le commentaire!

166
Gloopy

Le développeur AngularJS @ igor-minar a répondu ceci 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 et ng-repeat-end. Cette amélioration n'avait pas encore été publiée aux versions 1.0.7 (stable) et 1.1.5 (instable).

Mise à jour

Ceci est maintenant disponible dans 1.2.0rc1. Découvrez les documents officiels et ce screencast par John Lindquist.

35
Anson

Avoir plusieurs éléments peut être valide, mais si vous essayez de construire une grille avec des en-têtes/pieds de page fixes, la suite pourrait ne pas fonctionner. 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 tableau défilante

#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));
4
phanf

Vous pouvez le faire de cette manière, comme je l’ai montré dans cette réponse: https://stackoverflow.com/a/26420732/7699

<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>
0
Jeff Tian