html - KendoUI表+ AngularJS

我正在尝试实现一个通用表窗口小部件(使用KendoUI)，并使用AngularJS完成数据绑定(bind)。
表格窗口小部件在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网格 View 的内部结构。我最终得到一个内部表结构，如下所示:

​<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指令及其内容，如果没有一些丑陋的技巧，我不知道该怎么做。
另外，我不一定要绑定(bind)到KendoUI gridview，但是它看起来比其他 View 更好，并且它的内部结构可能与其他表小部件相似，因此其他小部件也将遇到相同的问题。
你们对如何使用AngularJS实现通用表有一些想法/建议吗？我确实搜索了一些用AngularJS完成的表，但是没有找到具有良好功能和外观的东西。

最佳答案

我创建了两个 fiddle ，它们将演示如何实现您想要的目标。第一个 fiddle 使用(http://jsfiddle.net/ganarajpr/FUv9e/2/)kendoui的网格...这样它的样式和显示就完成了。唯一的警告是，如果模型更改，它将不会更新。这是因为kendoui首先获取数据，然后根据开头提供的模型生成所有UI元素。

另一种方法是使用Kendo的UI(css)，而忽略生成网格的代码。

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

我相信这更接近您想要的东西。它还演示了在表中使用ng-repeat的方法。

希望这可以帮助。

关于html - KendoUI表+ AngularJS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11725233/