tutorial examples ejemplos descargar javascript html angularjs

javascript - examples - Angular.js ng-repeat en mĂșltiples tr



angularjs examples (4)

Estoy usando Angular.js para una aplicación que usa trs ocultos para simular un efecto de deslizamiento mostrando el tr y deslizando hacia abajo el div en el td a continuación. Este proceso funcionó fantásticamente usando knockout.js cuando iteraba sobre una matriz de estas filas, porque podía usar <!-- ko:foreach --> alrededor de ambos elementos tr.

Con angular, se debe aplicar ng-repeat a un elemento html, lo que significa que parece que no puedo repetir estas filas dobles usando métodos estándar. Mi primera respuesta a esto fue crear una directiva para representar estas doble trs, pero me quedé corto porque las plantillas directivas deben tener un único elemento raíz, pero tengo dos ( <tr></tr><tr></tr> ) .

Si alguien con experiencia con ng-repeat y angular que ha descifrado esto puede explicar cómo resolver este problema, lo agradecería mucho.

(También debo señalar que adjuntar ng-repeat al tbody es una opción, pero esto produce múltiples tbodys, y supongo que es una mala forma para HTML estándar, aunque corrígeme si estoy equivocado)


AngularJS developer @ igor-minar respondió esto en Angular.js ng-repeat en múltiples elementos .

Miško Hevery implementó recientemente el soporte adecuado a través de ng-repeat-start y ng-repeat-end . Esta mejora no se ha liberado desde 1.0.7 (estable) y 1.1.5 (inestable).

Actualizar

Esto ahora está disponible en 1.2.0rc1. Consulte los documentos oficiales y este screencast de John Lindquist.


Puedes hacerlo de esta manera, como mostré en esta respuesta: https://.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>


Tener varios elementos puede ser válido, pero si intentas construir una cuadrícula desplazable con cabeceras / pies de página fijos, el seguimiento podría no funcionar. Este código asume los siguientes CSS, jquery y 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 para compilar encabezado / pie de página fijo para la grilla de la tabla desplazable

#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 para vincular el desplazamiento horizontal de tbody, esto no funciona porque tbody se repite durante 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));


Usando ng-repeat en tbody parece ser válido, mira esta publicación .

Además, una prueba rápida a través de un validador html permitió que varios elementos de tbody en la misma tabla.

Actualización: desde al menos Angular 1.2 hay un ng-repeat-start y ng-repeat-end para permitir la repetición de una serie de elementos. Consulte la documentación para obtener más información y ¡gracias a @Onite por el comentario!