如何使用angularjs在Kendo-Grid中渲染数据

Question

我试图将角度与kendo ui结合起来，在这里我想在简单的kendo网格中渲染数据。 但我无法达到目标。 以下是示例代码段，请告诉我可能是什么错误？

    <!DOCTYPE html>
<html ng-app="Sample">
<head>
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="https://rawgithub.com/kendo-labs/angular-kendo/master/build/angular-kendo.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>  
  <div ng-controller="SampleController">    
    <div>Products: {{products.length}}</div>
    <div kendo-grid k-data-source="products" k-selectable="'row'"
    k-pageable='{ "pageSize": 2, "refresh": true, "pageSizes": true }'
      k-columns='[
        { "field": "id", "title": "Id"},
        { "field": "name", "title": "Name"},
        { "field": "department", "title": "Department"},
        { "field": "lastShipment", "title": "Last Shipment" }
      ]'>
    </div>
  </div>
  <script>
 var app = angular.module('Sample', ['kendo.directives']);
 app.controller('SampleController', ['$scope', function ($scope) {
   $scope.products = [
        { id:1, name:'Tennis Balls', department:'Sports', lastShipment:'10/01/2013' },
        { id:2, name:'Basket Balls', department:'Sports', lastShipment:'10/02/2013' },
        { id:3, name:'Oil', department:'Auto', lastShipment:'10/01/2013' },
        { id:4, name:'Filters', department:'Auto', lastShipment:'10/01/2013' },
        { id:5, name:'Dresser', department:'Home Furnishings', lastShipment:'10/01/2013' }
    ];
}]);
  </script>
</body>
</html>

Answer 1

angular-kendo已过时，您现在应该使用kendo-ui-core https://github.com/telerik/kendo-ui-core/ 。 AngularJS绑定现在是该项目的一部分。

结果，对kendo库的在线引用似乎不再起作用。 我把它放在一个笨拙的地方，也无法使其正常工作。 Matthieu是错误的，您的angularjs应用程序运行正常。

我建议尝试从上面的链接中找到一个可行的例子。 他们在GitHub站点上有文档。

Answer 2

你必须在你的应用中声明你的控制器

将您的函数SampleController替换为

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

Kendo现在直接集成了angular，因此请转到此处并按照示例进行操作，您应该使用1.2.X之类的更高版本的angular JS。

我也做了一个Plunker 链接到Plunker

如何使用angularjs在Kendo-Grid中渲染数据

问题描述

2 个解决方案

解决方案1
2 2014-10-21 15:27:39

解决方案2
0 已采纳 2014-10-21 14:43:42

如何使用angularjs在Kendo-Grid中渲染数据

问题描述

2 个解决方案

解决方案1 2 2014-10-21 15:27:39

解决方案2 0 已采纳 2014-10-21 14:43:42

解决方案1
2 2014-10-21 15:27:39

解决方案2
0 已采纳 2014-10-21 14:43:42