如何在 Angular JS 中实现分页？ 【附实例】
已发表: 2020-04-20在我们继续了解分页在 Angular JS 中是如何工作的以及它是如何在该框架中实现的之前，让我们一步一步地开始讨论 Angular JS 和分页。
目录
什么是 Angular JS？
Angular JS 是用于创建动态 Web 应用程序的最受青睐的结构框架之一。 它允许开发人员使用 HTML 作为模板语言，甚至允许扩展 HTML 语法以清晰简洁地表达 Web 应用程序的各种组件。
它带有依赖注入和数据绑定功能，可以消除大部分必须由开发人员编写的代码。 所有这些都发生在浏览器中，使 Angular JS 成为一个可以方便地与几乎任何服务器技术一起使用的框架。
Angular JS 是一个开源框架，与 JavaScript 有几个相似之处。 它主要由开发人员用于开发需要在单个页面中显示其所有内容、文本和图形的应用程序。 但是，这并不意味着它不能用于创建多页应用程序。
我们将在这篇文章中解释分页如何帮助将内容分成多个页面，而不会影响其他因素的流程和导航。 由于两个非常重要的原因，它在全球如此流行的模型视图控制器框架 - 它基于 Google，并且始终与最新的发展趋势保持同步。 现在让我们将注意力转移到分页上。
阅读： AngularJS 面试问答
什么是分页？
正如我们在文章前面提到的那样，所有网站都不能在一个页面上显示所有信息。 虽然单页确实是首选，但在无法选择单页网站的情况下使用多页可以带来多种好处，包括轻松的网站导航、改进的用户体验等。
所有网站，尤其是 Flipkart 等电子商务网站，都无法在一个页面上列出所有产品并显示所有必要信息。 这就是分页出现的地方。 如果需要，它允许将文本、图像等形式的内容拆分为多个页面。 了解更多关于使用 AngularJS 进行 Web 开发的信息。
在几种情况下，分页非常方便。 如果您的网站包含大量信息，包括与类似类别或数据集相关的博客、图表或图表，您可以使用分页来拆分这些信息并提高导航和可读性。
Angular JS 中的分页
有几种方法可以在网站或任何 Web 应用程序上显示数据。 列表和表格是大多数人用来显示易于阅读和理解的信息的最常见元素。 在 Angular 应用程序中，ng-repeat 功能用于在列表或表格中显示信息。 但是，这仅在显示的数据不太大时才有效。 对于更大的数据集，排序、搜索和分页等功能使表格和列表更易于管理，应用程序对用户更友好。
对于不太了解需要遵循的实现方法的人来说，Angular JS 分页可能比 Laravel、Code PHP 和其他框架中的分页更困难。 您可以使用分页以及搜索和排序功能以易于导航和易于阅读的格式列出记录。
您可以使用第三方 Angular 库将简单列表包含在具有排序和搜索功能的多个页面中。 为此目的，最首选的第三方库是 dirPagination。 该库易于访问且非常易于使用。 它可用于低于 Angular 2 的 Angular 版本。如果您使用 Angular 2，您将在内部库中分离可用的组件以添加排序、搜索和分页。
如果您想显示超过 200 条记录并使用例如 angular 1.4，您会发现 dirPagination 库比其他此类库更快并且性能也很高。 它是一个即插即用的库，不需要 Angular JS 控制器来运行任何逻辑或设置命令。 此外，它也适用于 Bootstrap。
Angular JS 中的分页示例
这是在 Angular JS 中显示分页的代码。
来源：（ https://gist.github.com/kmaida/06d01f6b878777e2ea34 ）
<!DOCTYPE HTML>
<html lang=”en” ng-app=”myApp”>
<头部>
<元字符集=”utf-8″>
<title>带过滤的动态分页</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<元名称=”描述”内容=””>
<meta name=”author” content=”Kim Maida”>
<!– JS 库 –>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js” type=”text/javascript”></script>
<script src=”http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js” type=”text/javascript”></script>
<!– Angular 脚本 –>
<script src=”script.js” type=”text/javascript”></script>
<!– 引导程序–>
<link rel=”stylesheet” type=”text/css” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css” />
</head>
<正文>
<div ng-controller=”PageCtrl”>
<div ng-controller=”PageCtrl”>
<label>搜索：</label> <input type=”text” ng-model=”search.name” placeholder=”Search” />
<br />
<label>按类别过滤：</label>
<ul>
<li><a href=”” ng-click=”search.category='engineering'”>工程</a></li>
<li><a href=”” ng-click=”search.category='management'”>管理</a></li>
<li><a href=”” ng-click=”search.category='business'”>商业</a></li>
</ul>
<label>按分支过滤：</label>
<ul>
<li><a href=”” ng-click=”search.branch='West'”>西</a></li>
<li><a href=”” ng-click=”search.branch='East'”>东</a></li>
</ul>
<p><strong><a href=”” ng-click=”resetFilters()”>全部显示</a></strong></p>
<h1>项目</h1>
<ul>
<li ng-repeat=”过滤后的项目=项目| 过滤器：搜索 | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit”>{{item.name}}</li>
</ul>
<pagination page=”currentPage” max-size=”noOfPages” total-items=”totalItems” items-per-page=”entryLimit”></pagination>
</div>
</正文>
</html>
app.js（来源：https://gist.github.com/kmaida/06d01f6b878777e2ea34）
var app = angular.module('myApp', ['ui.bootstrap']);
app.filter('startFrom', function () {
返回函数（输入，开始）{
如果（输入）{
开始 = +开始；
返回 input.slice(start);
}
返回 [];
};
});
app.controller('PageCtrl', ['$scope', 'filterFilter', function ($scope, filterFilter) {
$scope.items = [{
“名称”：“名称 1”，
“类别”： [{
“分类管理”
}, {
“类别”：“业务”
}],
“分支”：“西部”
}, {
“名称”：“名称 2”，
“类别”： [{
“类别”：“工程”
}],
“分支”：“西部”
}, {
“名称”：“名称 3”，
“类别”： [{
“分类管理”
}, {
“类别”：“工程”
}],
“分支”：“西部”
}, {
“名称”：“名称 4”，
“类别”： [{
“分类管理”
}, {
“类别”：“业务”
}],
“分支”：“西部”
}, {
“名称”：“名称 5”，
“类别”： [{
“分类管理”
}, {
“类别”：“业务”
}],
“分支”：“东”
}, {
“名称”：“名称 6”，
“类别”： [{
“分类管理”
}, {
“类别”：“业务”
}],
“分支”：“东”
}, {
“名称”：“名称 7”，
“类别”： [{
“分类管理”
}, {
“类别”：“业务”
}],
“分支”：“东”
}, {
“名称”：“名称 8”，
“类别”： [{
“类别”：“业务”
}],
“分支”：“西部”
}, {
“名称”：“名称 9”，
“类别”： [{
“分类管理”
}, {
“类别”：“业务”
}],
“分支”：“东”
}, {
“名称”：“名称 10”，
“类别”： [{
“分类管理”
}],
“分支”：“东”
}, {
“名称”：“名称 11”，
“类别”： [{
“分类管理”
}, {
“类别”：“业务”
}],
“分支”：“东”
}, {
“名称”：“名称 12”，
“类别”： [{
“类别”：“工程”
}],
“分支”：“西部”
}, {
“名称”：“名称 13”，
“类别”： [{
“分类管理”
}, {
“类别”：“业务”
}],
“分支”：“西部”
}, {
“名称”：“名称 14”，
“类别”： [{
“类别”：“工程”
}],
“分支”：“东”
}, {
“名称”：“名称 15”，
“类别”： [{
“分类管理”
}, {
“类别”：“工程”
}],
“分支”：“东”
}, {
“名称”：“名称 16”，
“类别”： [{
“分类管理”
}],
“分支”：“西部”
}, {
“名称”：“名称 17”，
“类别”： [{
“分类管理”
}],
“分支”：“东”
}, {
“名称”：“名称 18”，
“类别”： [{
“类别”：“业务”
}],
“分支”：“西部”
}, {
“名称”：“名称 19”，
“类别”： [{
“类别”：“业务”
}],
“分支”：“西部”
}, {
“名称”：“名称 20”，
“类别”： [{
“类别”：“工程”
}],
“分支”：“东”
}, {
“名字”：“彼得”，
“类别”： [{
“类别”：“业务”
}],
“分支”：“东”
}, {
“姓名”：“弗兰克”，
“类别”： [{
“分类管理”
}],
“分支”：“东”
}, {
“名字”：“乔”，
“类别”： [{
“类别”：“业务”
}],
“分支”：“东”
}, {
“名字”：“拉尔夫”，
“类别”： [{
“分类管理”
}, {
“类别”：“业务”
}],
“分支”：“东”
}, {
“名字”：“吉娜”，
“类别”： [{
“类别”：“业务”
}],
“分支”：“东”
}, {
“姓名”：“山姆”，
“类别”： [{
“分类管理”
}, {
“类别”：“工程”
}],
“分支”：“东”
}, {
“名称”：“布兰妮”，
“类别”： [{
“类别”：“业务”
}],
“分支”：“西部”
}];
解释
上面使用的代码将根据他们各自的教育类别或学科以及他们的地理位置显示学生的姓名。 Angular JS 分页功能将允许在多个页面上以表格格式提及这些细节。 这是您对信息进行排序并使其对用户更具表现力的方式。 这可以说是改善 Web 应用程序用户体验的最简单方法。
因此，如果您是 Web 开发人员，则不应尽可能有效地延迟学习它。 上面给出了关于为什么 AngularJS 是当今科技界的理想工具的上述论点，你有所有的解释可以继续前进！
如果您有兴趣了解有关 AngularJS、全栈开发的更多信息，请查看 upGrad 和 IIIT-B 的全栈软件开发 PG 文凭，该文凭专为工作专业人士设计，提供 500 多个小时的严格培训、9 个以上的项目和任务、IIIT-B 校友身份、实用的实践顶点项目和顶级公司的工作协助。