125

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

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

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

(また、tbody へのアタッチはオプションですが、これにより複数の tbody が生成されることに注意する必要ng-repeatがあります。これは標準 HTML では不適切な形式であると想定していますが、間違っている場合は修正してください)

4

4 に答える 4

169

ng-repeaton の使用はtbody有効なようです。この投稿を参照してください。

また、 html バリデーターによる簡単なテストtbodyでは、同じテーブルに複数の要素を含めることができました。

更新:少なくとも Angular 1.2 の時点では、一連の要素の繰り返しを許可するng-repeat-startandがあります。ng-repeat-end詳細については、ドキュメントを参照してください。コメントについては @Onite に感謝します。

于 2012-10-19T20:19:23.130 に答える
35

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 によるこのスクリーンキャストを確認してください。

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

tbody の水平スクロールをバインドするための Jquery。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 に答える