Angular.js ng-repeat 跨越多个 tr

Posted 2023-02-22

【中文标题】Angular.js ng-repeat 跨越多个 tr

【英文标题】：Angular.js ng-repeat across multiple tr's

【发布时间】：2012-10-10 08:39:13

【问题描述】：

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

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

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

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

【参考方案1】：

在tbody 上使用ng-repeat 似乎是有效的，请参阅this post。

还通过html validator 进行快速测试，允许同一个表中有多个tbody 元素。

更新：至少从 Angular 1.2 开始，有一个 ng-repeat-start 和 ng-repeat-end 允许重复一系列元素。更多信息请参见the documentation，感谢@Onite 的评论！

【讨论】：

太棒了。我遇到了同样的问题并且实际上对此进行了辩论，但我认为仅在 tbody 标签上进行迭代是行不通的。谢谢！

现在有点晚了，但是 Angular 1.2 引入了 ng-repeat-start 和 ng-repeat-end 指令来允许你迭代多个元素。

@Onite 现在已经很晚了，我使用的是 AS 1.5，但不知道 ng-repeat 添加的 -end 和 -start 功能。你把我指向那里，所以永远不要为在答案中添加信息而道歉。

ng 重复文档的 url 是错误的，但更改不超过六个字符，所以我无法在不添加一些无用的元编辑的情况下对其进行编辑。正确的 url 应该是 @987654324 @

【参考方案2】：

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.0rc1 中可用。查看 John Lindquist 的 official docs 和 this screencast。

【讨论】：

他在 2013 年 6 月 11 日的 Angular 聚会直播中提到了这一点。期待 Angular 1.1.5+ 和 Angular 2.0 中的这个和其他功能。

我指的是 cdnjs cdn 上的 1.1.5，这不起作用。 //cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js 你知道这应该是什么版本吗？

正确，没有在 1.1.5 发布，所以请注意 1.1.6（或很可能是 1.2.0）尽快登陆。以下是 Miško 对发布的承诺：github.com/angular/angular.js/commit/…

还很高兴注意到这适用于每个指令，而不仅仅是 ngRepeat ;)

【参考方案3】：

拥有多个元素可能是有效的，但如果您尝试构建具有固定页眉/页脚的可滚动网格，则以下操作将无法正常工作。此代码假定以下 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_koborder-collapse:separate
#tablegrid_ko tfoot,#tablegrid_ko theadz-index:1
#tablegrid_ko tbodyz-index:0
#tablegrid_ko trheight: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 >tdbackground-color:#fff
#tablegrid_ko tr:nth-child(odd)>tdbackground-color:#f3f3f3;border-color:#fff #e6e6e6 #e6e6e6 #fff
#tablegrid_ko tr:nth-child(even)>tdbackground-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 tableposition:static
div.scrollable-table-wrapper tfoot,div.scrollable-table-wrapper theadposition:absolute
div.scrollable-table-wrapper theadleft:0;top:0
div.scrollable-table-wrapper tfootleft:0;bottom:0
div.scrollable-table-wrapper tbodydisplay: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));

【参考方案4】：

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