Angular.js ng-跨多个tr重复
我使用Angular.js开发了一个应用程序，它使用隐藏的trs来模拟滑出效果，方法是在下面的td中显示tr并向下滑动div。在迭代这些行的数组时，使用knockout.js可以很好地完成这个过程，因为我可以对两个tr元素使用<!-- ko:foreach -->。
对于angular，ng-repeat必须应用于html元素，这意味着我似乎不能使用标准方法重复这两行。我对此的第一个反应是创建一个指令来表示这两个trs，但这没有做到，因为指令模板必须有一个根元素，但我有两个根元素(<tr></tr><tr></tr>)。
如果有谁有使用ng-repeat和angular的经验，谁破解了这个问题，我将不胜感激。
(我还应该注意到，将ng-repeat附加到tbody是一种选择，但这会产生多个tbody，我假设这对标准HTML来说是不好的形式，尽管如果我错了，请纠正我)
回答 3
Stack Overflow用户
发布于 2013-06-11 21:32:35
AngularJS开发者@igor-minar用Angular.js ng-repeat across multiple elements回答了这个问题。
通过ng-repeat-start和ng-repeat-end，Miško Hevery最近实现了适当的支持。此增强功能尚未发布到1.0.7 (稳定)和1.1.5 (不稳定)。
更新
这在1.2.0rc1中可用。看看John Lindquist写的official docs和this screencast吧。
Stack Overflow用户
发布于 2014-03-08 23:15:01
拥有多个元素可能是有效的，但如果你试图构建一个具有固定页眉/页脚的可滚动网格，下面的方法可能不会起作用。这段代码假设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为可滚动表格网格构建固定页眉/页脚
#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-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));Stack Overflow用户
发布于 2014-10-17 16:18:24
您可以这样做，正如我在下面的回答中所展示的：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>https://stackoverflow.com/questions/12979205
复制相似问题