Angular.js ng-repeat跨越多个tr
我正在使用Angular.js的应用程序，使用隐藏的trs模拟滑出效果，通过显示tr并滑动在下面的td div。 当遍历这些行的数组时，这个过程使用了knockout.js，因为我可以在两个tr元素周围使用<!-- ko:foreach --> 。
使用angular度， ng-repeat必须应用于html元素，这意味着我似乎无法使用标准方法重复这些双行。 我的第一个反应是创build一个指令来表示这些double trs，但是这只是因为指令模板必须有一个根元素，但是我有两个（ <tr></tr><tr></tr> ） 。
如果有任何有关ng-repeat和angular已经破解的经验的人可以解释如何解决这个问题，我会非常感激。
（我也应该注意到，附加ng-repeat到tbody是一个选项，但是这会产生多个tbodys，而且我认为这对于标准的HTML来说是不好的forms，虽然如果我错了，那么纠正我）
在tbody上使用ng-repeat似乎是有效的看到这篇文章 。
另外通过一个HTMLvalidation器的快速testing允许在同一个表中的多个tbody元素。
更新：至less在Angular 1.2中，有一个ng-repeat-start和ng-repeat-end来允许重复一系列的元素。 请参阅文档获取更多信息，并感谢@Onite的评论！
AngularJS developer @ igor-minar 在多个元素上以Angular.js ng-repeat的方式回答了这个问题。
MiškoHevery最近通过ng-repeat-start和ng-repeat-end实现了适当的支持。 从1.0.7（稳定）和1.1.5（不稳定）这个增强还没有发布。
更新
现在在1.2.0rc1中可用。 查看John Lindquist的官方文档和截屏video 。
有多个元素可能是有效的，但如果你想用固定的页眉/页脚来构build一个可滚动的网格，那么下面的内容可能不起作用。 这段代码假设下面的CSS，jQuery和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为可滚动表格网格构build固定页眉/页脚
#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绑定横向滚动的tbody，这是行不通的，因为tbody重复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));
你可以这样做，就像我在这个答案中所示： 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>
