angular和bootstrap创建分页

最新推荐文章于 2019-08-23 08:49:00 发布

原创最新推荐文章于 2019-08-23 08:49:00 发布 · 976 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #angular #分页

angular 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用AngularJS实现的简单分页功能。通过定义一个名为UserCtrl的控制器，该控制器利用JavaScript来生成页面导航链接。每个链接代表一个页面，并能够根据当前页更新其状态。此外，还提供了一个用于触发页面变化的函数，以便于从后端获取对应页的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、js文件

app.controller('绑定的控制器名称（UserCtrl ）',[$scope,$http,
	function($scope,$http)
	{
		$scope.createPages = function(pages)
		{
			var arr = [];
			for(var i=0;i<pages;i++)
			{
				arr[i] = {
					page : i+1,
					current : i+1 == $scope.currPage
				}
			}
			$scope.pages = arr;
			return;
		}
	}
]);

2、html文件

<div class = "col-sm-4 text-right-cener-xs">
	<ul class = "pagination pagination-sm m-t-none m-b-none">
		<li><a ng-click = "获取表格数据(上一页的页码)"><i class = "fa fa-chevron-left"></i></a></li>
		<li ng-repeat = "page in pages">
			<a ng-click = "获取表格数据(page.page)>{{page.page}}</a>
		</li>
		<li><a><i class = "fa fa-chevron-right></i></a></li>
	</ul>
</div>

3、显示样式