Javascript Angular.js ng在多个tr'；s

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

对于angular，

ng repeat

必须应用于html元素，这意味着我似乎无法使用标准方法重复这些双行。我对此的第一个反应是创建一个指令来表示这些双TR，但这还不够，因为指令模板必须有一个根元素，但我有两个（

）

如果任何有ng repeat和angular经验的人能够解释如何解决这个问题，我将不胜感激

---

（我还应该注意，将

ng repeat

附加到tbody是一个选项，但这会产生多个tbody，我假设这对于标准HTML来说是不好的形式，尽管如果我错了，请更正我）

在

tbody

上使用

ng repeat

似乎是有效的，请参见

还可以通过同一表格中允许的多个

t正文

元素进行快速测试

---

更新：至少从Angular 1.2开始，有一个

ng repeat start

和

ng repeat end

允许重复一系列元素。有关更多信息，请参阅，并感谢@Onite的评论

AngularJS开发者@igor minar对此给出了回答

米什科最近通过

ng repeat start

和

ng repeat end

实施了适当的支持。从1.0.7（稳定）和1.1.5（不稳定）起，此增强功能尚未发布

更新

---

该功能现在在1.2.0rc1中提供。查看John Lindquist的和。

具有多个元素可能是有效的，但如果您试图构建具有固定页眉/页脚的可滚动网格，则以下操作可能无法工作。此代码采用以下CSS、jquery和AngularJS

HTML

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));

$（函数（$）{
$.fn.tablegrid=函数（）{
var$表=$（此）；
var$thead=$table.find（'thead'）；
var$tbody=$table.find（'tbody'）；
var$tfoot=$table.find（'tfoot'）；
$table.wrap（“”）；
$tbody.bind（'scroll'，函数（ev）{
var$css={'left'：-ev.target.scrollLeft}；
$thead.css（$css）；
//$tfoot.css（$css）；
});
}；//插件函数
}（jQuery））；

您可以这样做，正如我在回答中所示：

{{m.Name}}
{{m.LastName}


{{d.hours}

他在2013年6月11日的Angular meetup livestream中提到了这一点。期待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）很快就会登陆。下面是米什科的承诺：注意到这不仅适用于ngRepeat；，而且适用于每一条指令，这一点也很好好极了我也遇到了同样的问题，实际上我也在讨论这样做，但我认为仅仅在tbody标签上迭代是不可能的。谢谢现在有点过时了，但Angular 1.2引入了ng repeat start和ng repeat end指令，允许您迭代多个元素。@我觉得现在要晚很多，我使用AS 1.5，但不知道ng repeat添加的结束和开始功能。你指出了我的问题，因此我永远不会为在答案中添加信息而道歉。ng repeat文档的url是错误的，但更改不超过六个字符，因此如果不添加一些无用的元编辑，我将无法对其进行编辑。。正确的url应该是

#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}

$(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));

<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>