如何使用angularjs在Kendo-Grid中渲染數據
[英]How to render the data in Kendo-Grid using angularjs
問題描述
我試圖將角度與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>
2 個解決方案
解決方案1
2 2014-10-21 15:27:39
angular-kendo已過時，您現在應該使用kendo-ui-core https://github.com/telerik/kendo-ui-core/ 。 AngularJS綁定現在是該項目的一部分。
結果，對kendo庫的在線引用似乎不再起作用。 我把它放在一個笨拙的地方，也無法使其正常工作。 Matthieu是錯誤的，您的angularjs應用程序運行正常。
我建議嘗試從上面的鏈接中找到一個可行的例子。 他們在GitHub站點上有文檔。
解決方案2
0 已采納 2014-10-21 14:43:42
你必須在你的應用中聲明你的控制器
將您的函數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
Karma + AngularJS + Kendo：Kendo網格測試不起作用
[英]Karma + AngularJS + Kendo: Kendo-grid testing is not working
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.