125

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

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

如果有破解此问题的 ng-repeat 和 Angular 经验的人可以解释如何解决此问题，我将不胜感激。

（我还应该注意，附加ng-repeat到 tbody 是一个选项，但这会产生多个 tbody，我假设这是标准 HTML 的错误形式，但如果我错了，请纠正我）

4

4 回答 4

169

使用ng-repeatontbody似乎是有效的，请参阅这篇文章。

此外，通过html 验证器tbody进行的快速测试允许在同一个表中包含多个元素。

更新：至少从 Angular 1.2 开始，有一个ng-repeat-startandng-repeat-end允许重复一系列元素。请参阅文档以获取更多信息，并感谢@Onite 的评论！

于 2012-10-19T20:19:23.130 回答
35

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

ng-repeat-startMiško Hevery 最近通过和实现了适当的支持ng-repeat-end。从 1.0.7（稳定）和 1.1.5（不稳定）开始，此增强功能尚未发布。

更新

这现在在 1.2.0rc1 中可用。查看官方文档和John Lindquist 的截屏视频。

于 2013-06-11T13:32:34.837 回答
4

拥有多个元素可能是有效的，但如果您尝试构建具有固定页眉/页脚的可滚动网格，则以下操作将无法正常工作。此代码假定以下 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));
于 2014-03-08T15:15:01.383 回答
0

正如我在此答案中所示，您可以这样做：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>
于 2014-10-17T08:18:23.683 回答