KendoUI表+ AngularJS [英] KendoUI table + AngularJS

问题描述

我正在尝试使用AngularJS完成数据绑定的通用表小部件（使用KendoUI）。
表格小部件在HTML文件中看起来像这样（fiddle here： http：// jsfiddle.net/mihaichiritescu/ULN36/35/ ）：

I am trying to implement a generic table widget (using KendoUI) having the data binding done with AngularJS. The table widget would look something like this in the HTML file (fiddle here: 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> 

基本上，表将有一个重复的重复，将通过对象列表重复，每个对象使用'gridviewcolumn'，我将在每一行添加单元格。
这样，我试图复制KendoUI表的结构，这是这样的：

Basically, the table would have an ng-repeat that would repeat through the list of objects, and for each object, using the 'gridviewcolumn', I would add cells under each row. This way, I am trying to replicate the structure of the KendoUI table, which is something like this:

​​<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网格视图的内部结构。我以一个内部表格结构为结束，如下所示：

So, using the ng-repeat, for each object I will dynamically add a new row, and for each column I will add a new cell on the last added row. Unfortunately, I am not able to manipulate the ng-repeat directive in such a way that I will properly replicate the internal structure of the KendoUI grid view. I am ending up with an internal table structure looking like this:

​<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完成的一些表，但是我没有找到可以具有很好的功能和外观的东西。

I would like to somehow place the content of the ng-repeat directive in the body of the table, not above it. Does anyone know how to accomplish this?
I could use jquery to place the content into the cells, but I would still have to remove/hide the ng-repeat directives and their content from above the table body, which I do not know how to do without some ugly hacks.
Also, I am not necessarily bound to KendoUI gridview, but it seems better looking than others, and it probably has similar internal structure to other table widgets, so I would encounter the same issue with other widgets too.
Do you guys have some ideas/advice on how to implement a generic table using AngularJS? I did search for some tables done with AngularJS, but I did not find something that would have good functionality and looks.

问候，

Paul

Regards,
Paul

推荐答案

我创造了两个谜语，这将演示你将要实现的目标。第一个小提琴使用（ http://jsfiddle.net/ganarajpr/FUv9e/2/ ） kendoui的网格...所以它的风格和显示是完整的。如果模型改变，唯一的警告就是不会更新。这是因为kendoui首先获取数据，然后根据开头提供的模型生成所有UI元素。

I have created two fiddles which would demonstrate how what you are trying to achieve could be done. The first fiddle uses ( http://jsfiddle.net/ganarajpr/FUv9e/2/ ) kendoui's grid ... So its style and display is complete. The only caveat being it wont update if the model changes. This is because kendoui takes the data first and then produces all the UI elements based on the model provided at the beginning.

替代方法是使用Kendo的UI（css），并省略生成代码。

The alternate is to use Kendo's UI (css) and leave out the grid producing code.

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

我相信更接近你正在寻找的东西。它还演示了在表中使用ng-repeat。

This I believe is closer to what you were looking for. It also demonstrates the use of ng-repeat in a table.

希望这有帮助。

这篇关于KendoUI表+ AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！