KendoUI表+ AngularJS

Question

我想实现一个通用表小部件（使用KendoUI）与AngularJS完成数据绑定。 表格部件会（在这里提琴：http://jsfiddle.net/mihaichiritescu/ULN36/35/）：看起来像这样在HTML文件中

<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重复，将通过对象的列表重复，并为每个对象，使用'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重复，每个对象，我会动态地添加一个新行，并为每一列我都会在最后添加的行上添加一个新单元格。不幸的是，我无法以这种方式操纵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重复指令的内容表中的身体，而不是它上面。有谁知道如何做到这一点？
我可以使用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。

希望这会有所帮助。

Answer 2

在html5中使用contenteditable可以轻松帮助您。