-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy path06-long-lists.html
77 lines (71 loc) · 2.97 KB
/
06-long-lists.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Long List Example</title>
<script src="angular.js"></script>
<script type="text/javascript">
'use strict';
(function (app) {
function Controller () {
var idx = 0;
this.list = [];
this.displayList = [];
while (idx < 1000000) {
this.list.push(Math.random());
idx += 1;
}
this.refreshPages();
}
Object.defineProperty(Controller.prototype, "currentPage", {
enumerable: true,
configurable: true,
get: function () { return this._currentPage; },
set: function (val) {
this._currentPage = val;
this.refreshPages();
}
});
angular.extend(Controller.prototype, {
pageSize: 20,
_currentPage: 1,
nextPage: 2,
previousPage: 0,
currentIndex: 0,
totalPages: 0,
refreshPages: function () {
var curIdx = this.currentIndex;
this.totalPages = Math.ceil(this.list.length / this.pageSize);
this.currentIndex = this.pageSize * (this._currentPage - 1);
this.previousPage = this._currentPage - 1;
this.nextPage = this._currentPage + 1;
if (curIdx !== this.currentIndex || this.displayList.length === 0) {
while (this.displayList.length > 0) {
this.displayList.pop();
}
for (curIdx = this.currentIndex;
curIdx < this.list.length && curIdx < this.currentIndex + this.pageSize;
curIdx += 1) {
this.displayList.push(this.list[curIdx]);
}
}
}
});
app.controller('myCtrl', Controller);
})(angular.module('angularApp', []));
</script>
</head>
<body data-ng-app="angularApp">
<h1>Angular Debugging and Performance</h1>
<h2>Long List</h2>
<p>Example of paging to manage extremely long lists. This example list has 1,000,000 entries.</p>
<div data-ng-controller="myCtrl as ctrl">
<ul><li data-ng-repeat="number in ctrl.displayList">{{number}}</li></ul>
<button data-ng-click="ctrl.currentPage = 1"><<</button>
<button data-ng-click="ctrl.currentPage = ctrl.currentPage-1" data-ng-disabled="ctrl.currentPage == 1"><</button>
{{ctrl.currentPage}} of {{ctrl.totalPages}}
<button data-ng-click="ctrl.currentPage = ctrl.currentPage+1" data-ng-disabled="ctrl.currentPage == ctrl.totalPages">></button>
<button data-ng-click="ctrl.currentPage = ctrl.totalPages">>></button>
</div>
</body>
</html>