使用Kendo UI和AngularJS创建基本数据网格

我正在试验AngularJS.我想展示一个基本的剑道网格.我正在尝试使用纯指令.考虑到这一点,我查看了Kendo UI / Angular JS项目( https://github.com/kendo-labs/angular-kendo).不幸的是,我的

index.html的：

<div>Products: {{products.length}}</div>
<div kendo-grid k-data-source="products" k-selectable="'row'"
  k-pageable='{ "refresh": true,"pageSizes": true }'
  k-columns='[
    { "field": "Name","title": "Name"},{ "field": "Department","title": "Department"},{ "field": "LastShipment","title": "Last Shipment" }
  ]'>
</div>

controllers.js

function myController($scope) {
    console.log("initializing controller...");
    $scope.products = [
        { id:1,name:'Tennis Balls',department:'Sports',lastShipment:'10/01/2013' },{ id:2,name:'Basket Balls',lastShipment:'10/02/2013' },{ id:3,name:'Oil',department:'Auto',{ id:4,name:'Filters',{ id:5,name:'Dresser',department:'Home Furnishings',lastShipment:'10/01/2013' }
    ];
}

我已经确认我已正确连接控制器.活动计数显示正常.但是,网格不会出现.我无法弄清楚我做错了什么.

谢谢您的帮助.

解决方法

看起来字段名称拼写错误.以下适用于我：

<div kendo-grid k-data-source="products" k-selectable="'row'"
k-pageable='{ "pageSize": 2,"refresh": true,"pageSizes": true }'
  k-columns='[
    { "field": "name",{ "field": "department",{ "field": "lastShipment","title": "Last Shipment" }
  ]'>
</div>

这是一个现场演示：http://jsbin.com/odeQAfI/2/edit

要避免寻呼机中的NaN消息,您需要将products字段设为Kendo DataSource：

function MyController($scope) {
   $scope.products = new kendo.data.DataSource({ 
     data: [
        { id:1,lastShipment:'10/01/2013' }
    ],pageSize: 2
  });
}

这是一个现场演示：http://jsbin.com/ODElUfO/2/edit