KendoUI Tabelle + AngularJS

Question

Ich versuche, ein generisches Tabellen-Widget (mit KendoUI) zu implementieren, bei dem die Datenbindung mit AngularJS erfolgt. Die Tabelle Widget würde (hier Geige: http://jsfiddle.net/mihaichiritescu/ULN36/35/): so etwas wie dies in der HTML-Datei aussieht

<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> 

Grundsätzlich wäre die Tabelle eine ng-repeat, die durch die Liste der Objekte, und für jedes Objekt wiederholen würde Unter Verwendung der "gridviewcolumn" würde ich Zellen unter jeder Reihe hinzufügen. Auf diese Weise versuche ich, die Struktur der KendoUI Tabelle zu replizieren, die so etwas wie dies:

​​<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>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

Also, mit der ng-Repeat, für jedes Objekt werde ich dynamisch eine neue Zeile hinzufügen und für jede Spalte Ich werde eine neue Zelle in der letzten Zeile hinzufügen. Leider kann ich die ng-repeat-Direktive nicht so manipulieren, dass ich die interne Struktur der KendoUI-Grid-Ansicht korrekt replizieren kann. Ich beende mit einer internen Tabellenstruktur wie folgt aussehen:

​<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>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

Ich möchte irgendwie in den Körper der Tabelle den Inhalt der ng-Repeat-Richtlinie platzieren, nicht darüber. Weiß jemand, wie man das erreicht?
Ich könnte jquery verwenden, um den Inhalt in die Zellen zu platzieren, aber ich müsste immer noch die ng-repeat-Direktiven und ihren Inhalt oberhalb des Tabellenkörpers entfernen/verstecken, was ich ohne hässliche Hacks nicht zu tun weiß.
Auch bin ich nicht unbedingt an KendoUI Gridview gebunden, aber es scheint besser als andere, und es hat wahrscheinlich ähnliche interne Struktur zu anderen Tabellen Widgets, so würde ich das gleiche Problem mit anderen Widgets zu begegnen.
Haben Sie einige Ideen/Ratschläge zur Implementierung einer generischen Tabelle mit AngularJS? Ich habe nach Tabellen gesucht, die mit AngularJS erstellt wurden, aber ich habe nicht etwas gefunden, das gute Funktionalität und Aussehen hat.

Answer 1

Ich habe zwei Geigen erstellt, die demonstrieren, wie das, was Sie erreichen wollen, gemacht werden könnte. Die erste Geige verwendet (http://jsfiddle.net/ganarajpr/FUv9e/2/) kendoui Gitter ... So ist sein Stil und Display vollständig. Der einzige Nachteil ist, dass es nicht aktualisiert wird, wenn sich das Modell ändert. Dies liegt daran, dass kendoui die Daten zuerst übernimmt und dann alle UI-Elemente basierend auf dem zu Beginn bereitgestellten Modell erstellt.

Die Alternative ist, Kendos UI (CSS) zu verwenden und den Gitterherstellungscode wegzulassen.

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

Das glaube ich ist näher an, was Sie suchen. Es demonstriert auch die Verwendung von ng-repeat in einer Tabelle.

Hoffe, das hilft.

Answer 2

Verwendung contenteditable in html5 wird Ihnen leicht helfen.