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可以輕鬆幫助您。