9

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 テーブルの構造を複製しようとしています。

​​&lt;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 ディレクティブを操作することはできません。次のような内部テーブル構造になってしまいます。

​&lt;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 で作成されたいくつかのテーブルを検索しましたが、優れた機能と外観を持つものは見つかりませんでした。

4

2 に答える 2

10

あなたが達成しようとしていることをどのように実行できるかを示す 2 つのフィドルを作成しました。最初のフィドルは ( http://jsfiddle.net/ganarajpr/FUv9e/2/ ) kendoui のグリッドを使用しています ... これでスタイルと表示が完成しました。唯一の注意点は、モデルが変更された場合に更新されないことです。これは、kendoui が最初にデータを取得し、最初に提供されたモデルに基づいてすべての UI 要素を生成するためです。

別の方法は、Kendo の UI (css) を使用し、グリッド生成コードを除外することです。

http://jsfiddle.net/ganarajpr/6kdvC/1/

これは、あなたが探していたものに近いと思います。また、テーブルでの ng-repeat の使用も示します。

お役に立てれば。

于 2012-08-09T22:06:37.233 に答える