<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>KendoGrid + NG</title>
<script src="https://kendo.cdn.telerik.com/2015.3.930/js/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<style>
.list > span {
display: block; float: left; text-align: center;
border: 1px solid gray;
margin: 2px; padding: 2px; width: 110px;
}
</style>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<button ng-click="loadData()">Load Data(NG)</button>
<button id="btnLoadDataHtml">Load Data(jQuery html)</button>
<button id="btnLoadDataDOM">Load Data(jQuery DOM)</button>
<div class="list">
<span ng-repeat="item in items">
{{item.FirstName}} {{item.LastName}}
{{$parent.calcDura($last)}}
</span>
</div>
</div>
</div>
<script>
var data = [];
for (var i = 0; i < 2000; i++) {
data.push({
FirstName: "FN" + i,
LastName: "LN" + i,
Country: "CN" + i,
City: "CT" + i,
Title: "T" + i
});
}
angular.module("KendoDemos", [])
.controller("MyCtrl", function ($scope) {
var st;
$scope.calcDura = function (last) {
if (last && st) {
var dura = (new Date() - st) + "ms";
st = null;
setTimeout(function () {
alert(dura);
}, 1);
}
return "";
};
$scope.loadData = function () {
st = new Date();
$scope.items = data;
};
});
$("#btnLoadDataHtml").click(function () {
var st = new Date();
var h = $.map(data, function (item, i) {
return "<span>" + item.FirstName + " " + item.LastName + "</span>";
}).join("\n");
$(".list").html(h);
alert((new Date() - st) + "ms");
});
$("#btnLoadDataDOM").click(function () {
var st = new Date();
var $list = $(".list");
$.each(data, function (i, item) {
$("<span>" + item.FirstName + " " + item.LastName + "</span>").appendTo($list);
});
alert((new Date() - st) + "ms");
});
</script>
</body>
</html>