AngularJS でデータ バインディングを行う一般的なテーブル ウィジェット (KendoUI を使用) を実装しようとしています。テーブル ウィジェットは、HTML ファイルでは次のようになります (フィドルはこちら: http://jsfiddle.net/mihaichiritescu/ULN36/35/ )。
<div ng:controller="Tester">
<gridview>
<div data-ng-repeat="man in people">
<gridviewcolumn datasource="name" man="man"></gridviewcolumn>
<gridviewcolumn datasource="age" man="man"></gridviewcolumn>
</div>
</gridview>
</div>
基本的に、テーブルにはオブジェクトのリストを繰り返す ng-repeat があり、オブジェクトごとに「gridviewcolumn」を使用して、各行の下にセルを追加します。このようにして、次のような KendoUI テーブルの構造を複製しようとしています。
<div id="grid">
<div class="k-grid-header"></div>
<div class="k-grid-content">
<table>
<colgroup></colgroup>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="k-pager-wrap k-grid-pager"></div>
<div>
したがって、ng-repeat を使用して、オブジェクトごとに新しい行を動的に追加し、列ごとに最後に追加された行に新しいセルを追加します。残念ながら、KendoUI グリッド ビューの内部構造を適切に複製するような方法で ng-repeat ディレクティブを操作することはできません。次のような内部テーブル構造になってしまいます。
<div id="grid">
<div data-ng-repeat="man in people" class="ng-scope">
<div datamember="name" man="man" class="ng-binding">name1</div>
<div datamember="age" man="man" class="ng-binding">21</div>
</div>
<div data-ng-repeat="man in people" class="ng-scope">
<div datamember="name" man="man" class="ng-binding">name2</div>
<div datamember="age" man="man" class="ng-binding">25</div>
</div>
<div class="k-grid-header"></div>
<div class="k-grid-content">
<table>
<colgroup></colgroup>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="k-pager-wrap k-grid-pager"></div>
<div>
ng-repeat ディレクティブの内容を、テーブルの上ではなく、テーブルの本文に配置したいと思います。これを達成する方法を知っている人はいますか?
jqueryを使用してコンテンツをセルに配置できますが、ng-repeatディレクティブとそのコンテンツをテーブル本体の上から削除/非表示にする必要があり、醜いハックなしではどうすればよいかわかりません。
また、私は必ずしも KendoUI の gridview に縛られているわけではありませんが、他のウィジェットよりも見栄えがよく、おそらく他のテーブル ウィジェットと同様の内部構造を持っているため、他のウィジェットでも同じ問題が発生する可能性があります。
AngularJS を使用して一般的なテーブルを実装する方法について、アイデアやアドバイスはありますか? AngularJS で作成されたいくつかのテーブルを検索しましたが、優れた機能と外観を持つものは見つかりませんでした。