KendoUI tabla + AngularJS

Question

Estoy tratando de implementar un widget de tabla genérico (utilizando KendoUI) con el enlace de datos hecho con AngularJS. El widget de mesa sería algo como esto en el archivo HTML (violín aquí: 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> 

Básicamente, la mesa tendría un ng de repetición que se repetiría a través de la lista de objetos, y para cada objeto , usando 'gridviewcolumn', agregaría celdas debajo de cada fila. De esta manera, estoy tratando de replicar la estructura de la tabla KendoUI, que es algo como esto:

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

Por lo tanto, utilizando el ng-repetir, para cada objeto que va a agregar dinámicamente una nueva fila, y para cada columna agregaré una nueva celda en la última fila agregada. Desafortunadamente, no puedo manipular la directiva ng-repeat de tal manera que replique correctamente la estructura interna de la vista de grilla de KendoUI. Estoy terminando con una estructura de tabla interna con este aspecto:

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

quisiera poner de alguna manera el contenido de la directiva ng-repetición en el cuerpo de la tabla, no por encima de ella. ¿Alguien sabe cómo lograr esto?
Podría usar jquery para colocar el contenido en las celdas, pero aún tendría que quitar/ocultar las directivas ng-repeat y su contenido desde arriba del cuerpo de la tabla, lo que no sé hacer sin algunos feos hacks.
Además, no estoy necesariamente vinculado a KendoUI gridview, pero parece mejor aspecto que otros, y probablemente tenga una estructura interna similar a otros widgets de tabla, por lo que me encontraría con el mismo problema con otros widgets también.
¿Ustedes tienen algunas ideas/consejos sobre cómo implementar una tabla genérica usando AngularJS? Busqué algunas tablas hechas con AngularJS, pero no encontré algo que tuviera una buena funcionalidad y apariencia.

Answer 1

He creado dos violines que demostrarían cómo se puede lograr lo que intentas lograr. El primer violín usa (http://jsfiddle.net/ganarajpr/FUv9e/2/) la grilla de Kendoui ... Por lo tanto, su estilo y visualización están completos. La única advertencia es que no se actualizará si el modelo cambia. Esto se debe a que kendoui toma los datos primero y luego produce todos los elementos de la interfaz de usuario basados ​​en el modelo provisto al principio.

La alternativa es utilizar la interfaz de usuario de Kendo (css) y omitir el código de producción de la cuadrícula.

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

Esto creo que está más cerca de lo que estaban buscando. También demuestra el uso de ng-repeat en una tabla.

Espero que esto ayude.

Answer 2

Usar contenteditable en html5 te ayudará fácilmente.