Tabela KendoUI + AngularJS

Question

Próbuję zaimplementować ogólny widget tabeli (przy użyciu KendoUI), który będzie wiązał dane z AngularJS. Widget tabela będzie wyglądać następująco w pliku HTML (skrzypce tutaj: 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> 

Zasadniczo, stół miałby NG-repeat, że powtarzanie przez listę obiektów, a dla każdego obiektu , używając "gridviewcolumn", dodałabym komórki w każdym rzędzie. ten sposób staram się replikować struktury tabeli KendoUI, która jest mniej więcej tak:

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

Więc korzystając z NG-powtarzania, dla każdego obiektu będę dynamicznie dodać nowy wiersz, a dla każda kolumna dodaję nową komórkę w ostatnio dodanym wierszu. Niestety, nie jestem w stanie manipulować dyrektywą ng-repeat w taki sposób, że będę poprawnie replikować wewnętrzną strukturę widoku siatki KendoUI. Ja kończąc wewnętrznej struktury tabeli wygląda tak:

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

Chciałbym jakoś umieścić treść dyrektywy ng-repeat w organizmie stołu, a nie nad nim. Czy ktoś wie, jak to osiągnąć?
Mogę użyć jquery do umieszczenia zawartości w komórkach, ale nadal będę musiał usunąć/ukryć dyrektywy ng-repeat i ich treść nad ciałem tabeli, czego nie wiem jak zrobić bez brzydkich hacków.
Ponadto, nie jestem koniecznie związany z grą KendoUI, ale wygląda na lepiej wyglądającą niż inne, i prawdopodobnie ma podobną wewnętrzną strukturę do innych widgetów tabel, więc napotkałbym ten sam problem z innymi widżetami.
Czy macie jakieś pomysły/porady dotyczące implementacji ogólnej tabeli za pomocą AngularJS? Szukałem kilku tabel wykonanych przy pomocy AngularJS, ale nie znalazłem czegoś, co miałoby dobrą funkcjonalność i wygląd.

Answer 1

Stworzyłem dwie skrzypce, które pokazały, jak można osiągnąć cel. Pierwsze skrzypce używają (http://jsfiddle.net/ganarajpr/FUv9e/2/) siatki kendoui ... Tak więc jego styl i wyświetlacz są kompletne. Jedynym zastrzeżeniem jest to, że nie aktualizuje się, jeśli model się zmienia. Dzieje się tak dlatego, że kendoui najpierw pobiera dane, a następnie tworzy wszystkie elementy interfejsu użytkownika na podstawie modelu dostarczonego na początku.

Alternatywą jest użycie interfejsu użytkownika Kendo (css) i pominięcie kodu generującego sieć.

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

to uważam, że jest bliżej do tego, czego szukasz. Pokazuje również użycie powtórzenia ng w tabeli.

Mam nadzieję, że to pomoże.

Answer 2

Korzystanie z contenteditable w html5 z łatwością Ci pomoże.