Angular.js ng-在多个 tr 上重复

我将 Angular.js 用于一个应用程序，该应用程序使用隐藏 trs 通过在下面的 td 中显示 tr 并向下滑动 div 来模拟滑出效果。这个过程在迭代这些行的数组时使用敲出.js 工作得非常好，因为我可以在 tr 元素周围使用 <!-- ko:foreach -->。

使用 angle，ng-repeat必须应用于 html 元素，这意味着我不能使用标准方法重复这些双行。我对此的第一个反应是创建一个指令来表示这些双 trs，但是这个方法不够，因为指令模板必须有一个根元素，但是我有两个(<tr></tr><tr></tr>)。

如果任何有 ng- 重复和角的经验的人谁已经破解了这个可以解释如何解决这个问题，我将非常感激。

(我还应该注意，将 ng-repeat附加到 tbody 是一个选项，但是这会产生多个 tbody，我假设这对于标准 HTML 来说是不好的形式，如果我错了请纠正我)

68140 次浏览
小开
最佳答案

Using ng-repeat on tbody appears to be valid see 这篇文章.

通过 html validator的快速测试还允许在同一个表中使用多个 tbody元素。

更新: 至少在角度1.2时，有一个 ng-repeat-start和 ng-repeat-end允许重复一系列元素。有关更多信息，请参见 文件，并感谢@Onite 的评论！

小开

AngularJS 开发者@igor-minar 在 Angular.js ng-repeat across multiple elements中回答了这个问题。

Mi ko Hevery 最近通过 ng-repeat-start和 ng-repeat-end提供了适当的支持。这个增强在1.0.7(稳定)和1.1.5(不稳定)时还没有发布。

更新

现在已经有1.2.0 rc1版本了，请查看 John Lindquist 的 官方文件和 这段视频。

小开

Having multiple elements might be valid but if you're trying to build a scrollable grid with fixed header / footers, the follow could will not work. This code assumes the following CSS, jquery and 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));
小开

你可以这样做，正如我在这个答案中所展示的: 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>

提交答案