Bảng KendoUI + AngularJS

Question

Tôi đang cố gắng triển khai một tiện ích bảng chung (sử dụng KendoUI) có liên kết dữ liệu được thực hiện với AngularJS. Các widget bảng sẽ giống như thế này trong các tập tin HTML (fiddle đây: 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> 

Về cơ bản, bảng sẽ có một ng-repeat đó sẽ lặp lại qua danh sách các đối tượng, và đối với từng đối tượng , bằng cách sử dụng 'gridviewcolumn', tôi sẽ thêm các ô dưới mỗi hàng. Bằng cách này, tôi đang cố gắng để tái tạo cấu trúc của bảng KendoUI, mà là một cái gì đó như thế này:

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

Vì vậy, sử dụng ng-repeat, cho từng đối tượng tôi tự động sẽ bổ sung thêm một hàng mới, và cho mỗi cột tôi sẽ thêm một ô mới trên hàng được thêm vào cuối cùng. Thật không may, tôi không thể thao tác chỉ thị ng-repeat theo cách sao cho tôi sẽ tái tạo đúng cấu trúc bên trong của chế độ xem lưới KendoUI. Tôi sắp kết thúc với cấu trúc bảng nội bộ trông như thế này:

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

Tôi muốn bằng cách nào đó đặt nội dung của chỉ thị ng-lặp lại trong phần thân của bảng chứ không phải ở trên nó. Có ai biết làm thế nào để thực hiện điều này?
Tôi có thể sử dụng jquery để đặt nội dung vào các ô, nhưng tôi vẫn phải xóa/ẩn chỉ thị ng-repeat và nội dung của chúng từ phía trên thân bảng, mà tôi không biết cách làm mà không có một số hacks xấu xí.
Ngoài ra, tôi không nhất thiết phải ràng buộc với GridView KendoUI, nhưng nó có vẻ tốt hơn so với những người khác, và nó có thể có cấu trúc nội bộ tương tự như các vật dụng bảng khác, vì vậy tôi sẽ gặp phải vấn đề tương tự với các vật dụng khác quá.
Các bạn có một số ý tưởng/lời khuyên về cách thực hiện một bảng chung bằng AngularJS không? Tôi đã tìm kiếm một số bảng được thực hiện với AngularJS, nhưng tôi đã không tìm thấy một cái gì đó mà sẽ có chức năng tốt và ngoại hình.

Answer 1

Tôi đã tạo hai câu đố để minh họa cách bạn đang cố đạt được điều gì. Fiddle đầu tiên sử dụng (http://jsfiddle.net/ganarajpr/FUv9e/2/) lưới của kendoui ... Vì vậy, phong cách và hiển thị của nó đã hoàn thành. Các caveat chỉ được nó sẽ không cập nhật nếu mô hình thay đổi. Điều này là do kendoui lấy dữ liệu đầu tiên và sau đó tạo ra tất cả các phần tử giao diện người dùng dựa trên mô hình được cung cấp ngay từ đầu.

Cách thay thế là sử dụng giao diện người dùng của Kendo (css) và bỏ qua mã sản xuất lưới.

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

Điều này tôi tin là gần hơn với những gì bạn đang tìm kiếm. Nó cũng cho thấy việc sử dụng ng-lặp lại trong một bảng.

Hy vọng điều này sẽ hữu ích.

Answer 2

Sử dụng nội dung có thể chỉnh sửa được trong html5 sẽ giúp bạn dễ dàng.