複数のtrにわたるAngular.jsのng-repeat

隠されたtrを使用するアプリケーションにAngular.jsを使用して、下のtdでtrを表示し、divを下にスライドすることにより、スライドアウト効果をシミュレートしています。このプロセスは、これらの行の配列を反復処理するときにknockout.jsを使用して素晴らしく機能しました<!-- ko:foreach -->。これは、両方のtr要素を使用できるためです。

angularの場合ng-repeat、html要素に適用する必要があります。つまり、標準の方法を使用してこれらの二重行を繰り返すことができないようです。これに対する私の最初の対応は、これらの二重trを表すディレクティブを作成することでしたが、ディレクティブテンプレートには単一のルート要素が必要ですが、2つ（<tr></tr><tr></tr>）あるため、不十分でした。

これをクラックしたng-repeatとAngularの経験がある人がこの問題を解決する方法を説明できれば、私は非常に感謝します。

（ng-repeattbodyへのアタッチはオプションですが、これは複数のtbodyを生成することにも注意する必要があります。標準のHTMLの場合はフォームが不適切であると想定していますが、間違っている場合は修正してください）

ng-repeatonの使用はtbody有効であるように見えます。この投稿を参照してください。

また、htmlバリデーターを介した簡単なテストtbodyでは、同じテーブル内の複数の要素が許可されていました。

更新：少なくともAngular 1.2以降、ng-repeat-startおよびがありng-repeat-end、一連の要素を繰り返すことができます。詳細についてはドキュメントを参照してください。コメントについては@Oniteに感謝します。

AngularJS開発者@ igor-minarは、Angular.jsで複数の要素にまたがるng-repeatでこれに答えました。

MiškoHeveryは最近ng-repeat-start、およびを介して適切なサポートを実装しましたng-repeat-end。この拡張機能は、1.0.7（安定版）および1.1.5（不安定版）の時点ではリリースされていません。

更新

これは1.2.0rc1で利用可能になりました。チェックアウト公式ドキュメントと、このスクリーンキャストをジョンリンドクイストによる。

複数の要素があることは有効かもしれませんが、固定ヘッダー/フッターでスクロール可能なグリッドを構築しようとしている場合、フォローは機能しません。このコードは、次の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}

tbodyの水平スクロールをバインドするjquery。これは、ng-repeat中にtbodyが繰り返されるため機能しません。

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