KendoUI表+ AngularJS

Question

我正在尝试使用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,对于每个对象,我将动态添加一个新行,对于每个列,我将在最后添加的行上添加一个新单元格.不幸的是,我无法以这样的方式操纵ng-repeat指令,我将正确地复制KendoUI网格视图的内部结构.我最终得到一个内部表结构,如下所示:

?<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完成的表,但是我找不到具有良好功能和外观的东西.

Answer 1

我创建了两个小提琴,可以演示你想要实现的目标.第一个小提琴使用(http://jsfiddle.net/ganarajpr/FUv9e/2/)kendoui的网格...所以它的风格和显示是完整的.唯一需要注意的是,如果模型发生变化,它不会更新.这是因为kendoui首先获取数据,然后根据开头提供的模型生成所有UI元素.

替代方案是使用Kendo的UI(css)并省略网格生成代码.

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

我相信这更接近你所寻找的.它还演示了在表格中使用ng-repeat.

希望这可以帮助.