如何使用angularjs在剑道网格中渲染数据
How to render the data in Kendo-Grid using angularjs
我正在尝试将angular与剑道ui结合起来,这里我想在简单的剑道网格中渲染数据。但我够不着它。以下是示例代码片段,请告诉我可能出了什么问题?
<!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>
angular剑道已弃用,现在应该使用剑道ui核心https://github.com/telerik/kendo-ui-core/.AngularJS绑定现在是这个项目的一部分。
因此,网上对剑道图书馆的引用似乎不再有效。我把这个放在一个罐子里,也不能让它工作。Matthieu错了,你的angularjs应用程序运行良好。
我建议尝试从上面的链接中找到一个工作示例。他们在GitHub网站上有文档。
您必须在应用程序中声明您的控制器
用替换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,所以请点击此处并遵循示例,您应该使用更高版本的angular JS,比如1.2.X
我还做了一个Plunker链接到Plunker
相关文章:
- 如何从自定义对话框编辑数据网格中的选定行
- dojox 数据网格不显示
- AngularJS中的可编辑数据网格
- 如何将网络数据网格的更改提交到会话
- 如何在asp.net中的用户定义的数据网格中使列可编辑
- 使用push复制数据网格结构
- 通过ID获取声明性dojo数据网格
- 将列设置为在EasyUI数据网格上按排序显示
- 插入数据并用新数据刷新数据网格后,关闭弹出窗口
- 如何隐藏除最后一列之外的数据网格列
- 在数据网格中的复选框单击时使用 Databinder.Eval
- 使用 AJAX 和 __doPostBack 在数据网格中 Asp.net 用户控件
- 删除数据网格 (Dojo) 和表 (数据网格) 的实例正确显示
- 响应式数据网格
- React.js和丰富的数据网格组件或至少是hack [2015]
- 在 DOJO 中隐藏数据网格的列
- Javascript/JQuery 数据网格,用于在数据表中显示/编辑/输入
- Dojo 增强型数据网格未填充 JsonRest 存储
- 在下拉列表中使用多个对象类型为数据网格提供筛选
- 动态地将值输入到网络数据网格行添加中