极客教程AngularJS中的分页
AngularJS中的分页，是一种将某个大页面的内容分成小页面并以索引的形式依次显示的技术。这种技术在设计搜索引擎时非常流行，其中，最相关的内容被优先呈现。同时，分页技术也被许多Angular开发人员使用，同时使用Bootstrap开发动态网页。
例子：在下面的例子中，实现了分页技术，在AngularJS中也被称为分页技术。HTML代码必须被添加到index.html文件中，而javascript代码必须被添加到script.js文件中。在下面提到的例子中，我们创建了一个表格，并使用javascript将数据放入其中，用分页来表示整个实现过程。
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.1.5" data-semver="1.1.5" src=
"http://code.angularjs.org/1.1.5/angular.min.js">
</script>
<link data-require="bootstrap-css@2.3.2" data-semver="2.3.2" rel="stylesheet"
href=
"//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
<script data-require="angular-ui-bootstrap@0.3.0" data-semver="0.3.0"
src=
"http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.min.js">
</script>
<script src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller="ListController as list">
<h1 style="color: green;" ;>
GeeksforGeeks
</h1>
<h3>AngularJS Paging</h3>
<table border="1">
<thead>
<tr>
<th>COURSE CODE</th>
<th>COURSE NAME</th>
<th>COURSE DESCRIPTION</th>
<th>NO. OF CHAPTERS</th>
<th>AVAILABILITY</th>
<th>TOTAL MARKS</th>
<th>PASS MARKS</th>
<th>STATE OF COURSE</th>
</tr>
</thead>
<tr ng-repeat="item in filteredItems">
<td>{{item.courseCode}}</td>
<td>{{item.courseName}}</td>
<td>{{item.courseDescription}}</td>
<td>{{item.noc}}</td>
<td>{{item.available}}</td>
<td>{{item.totm}}</td>
<td>{{item.passm}}</td>
<td>{{item.soc}}</td>
</tr>
</table>
<div data-pagination=""
data-num-pages="numOfPages()"
data-current-page="curPage"
data-max-size="maxSize"
data-boundary-links="true">
</div>
</body>
</html>
app.js:
<script>
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('ListController', function (scope) {
scope.curPage = 1,
scope.itemsPerPage = 3,
scope.maxSize = 5;
this.items = itemsDetails;
scope.numOfPages = function () {
return Math.ceil(itemsDetails.length /scope.itemsPerPage);
};
scope.watch('curPage + numPerPage', function () {
var begin = ((scope.curPage - 1) *scope.itemsPerPage),
end = begin + scope.itemsPerPage;
scope.filteredItems = itemsDetails.slice(begin, end);
});
});
var itemsDetails = [
{
courseCode: 1001,
courseName: 'Web Technology',
courseDescription: 'HTML, CSS, AngularJS',
noc: '10',
available: 'YES',
totm: 200,
passm: 75,
soc: 'Active'
},
{
courseCode: 1002,
courseName: 'Software Technology',
courseDescription:
'Alpha testing, Beta testing, Integration testing, Black box testing',
noc: '10',
available: 'YES',
totm: 100,
passm: 45,
soc: 'Active'
},
{
courseCode: 1003,
courseName: 'Theory Of Computation',
courseDescription: 'FSM, PDA, TM',
noc: '100',
available: 'NO',
totm: 100,
passm: 45,
soc: 'Inactive'
},
{
courseCode: 1004,
courseName: 'Algorithm',
courseDescription:
'Greedy algorithms, Dynamic Programming, Sorting',
noc: '6',
available: 'YES',
totm: 200,
passm: 75,
soc: 'Active'
},
{
courseCode: 1005,
courseName: 'Networking',
courseDescription: 'IP',
noc: '12',
available: 'YES',
totm: 50,
passm: 19,
soc: 'Active'
},
{
courseCode: 1006,
courseName: 'Database',
courseDescription: 'Indexing, B and B+ trees, SQL',
noc: '24',
available: 'NO',
totm: 200,
passm: 75,
soc: 'Inactive'
},
{
courseCode: 1007,
courseName: 'Programming',
courseDescription: 'C, C++, JAVA, Python',
noc: '30',
available: 'YES',
totm: 200,
passm: 75,
soc: 'Active'
},
{
courseCode: 1008,
courseName: 'Data structure',
courseDescription: 'Tree, Graph',
noc: '10',
available: 'NO',
totm: 100,
passm: 45,
soc: 'Inactive'
},
{
courseCode: 1009,
courseName: 'Operating Systems',
courseDescription:
'CPU Scheduling, Memory Managment, Disk Management',
noc: '21',
available: 'YES',
totm: 200,
passm: 75,
soc: 'Active'
},
{
courseCode: 1010,
courseName: 'Compiler',
courseDescription: 'Top down parsing, Bottom up Parsing',
noc: '15',
available: 'YES',
totm: 200,
passm: 75,
soc: 'Active'
}
];
</script>
解释：该网页以表格形式显示所有可用的课程细节。这里使用的技术是分页法。这允许在一个网页上只播放三行，在最后一页只显示一行。有四个页面被创建。为了显示分页栏，我们使用了ui.bootstrap作为AngularJS应用程序的依赖项。CurPage “被初始化为1，这意味着每当网页加载时，它将显示第一页作为当前页。每页的项目数是用 “itemsPerPage “变量指定的，它的值是3，因为我们想在一个页面上最多显示3个项目。maxSize “变量表示分页系统中允许的最大页面数。这一行“this.items = itemsDetails;”启动了 itemDetails 变量。我们创建了一个函数来计算页数，然后将该值存储在名为 “numOfPages “的范围变量中。我们输入了10个课程的详细信息，通过上述ceil函数计算页数，共得到4页。我们在 “itemsDetails “数组中有10个项目，这意味着数组的索引范围将从0到9。对于第一页，”curPage “的值将是0，这将使值开始为0，它将帮助我们获得数组的第一个索引值。end “变量的值将是0+3=3。通过使用slice()方法，我们显示了3行，即项目编号0、1和2。类似地，在第二、第三和第四页，显示其余的项目。这就是AngularJS中分页的工作方式。
输出:
AngularJS Pagination