以下是一个使用AngularJS实现分页页面编号样式的示例代码:
HTML模板:
JavaScript代码:
angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.currentPage = 1; // 当前页码
$scope.pages = []; // 页面编号列表
$scope.totalPages = 10; // 总页数
// 初始化页面编号列表
for (var i = 1; i <= $scope.totalPages; i++) {
$scope.pages.push(i);
}
// 设置当前页码
$scope.setCurrentPage = function(page) {
$scope.currentPage = page;
};
});
CSS样式:
.pagination {
list-style: none;
display: flex;
justify-content: center;
}
.pagination li {
margin-right: 5px;
}
.pagination li a {
display: inline-block;
padding: 5px 10px;
background-color: #f5f5f5;
color: #333;
text-decoration: none;
}
.pagination li.active a {
background-color: #337ab7;
color: #fff;
}
在上面的代码中,通过在控制器中定义currentPage
变量来表示当前选中的页码,使用ng-repeat
指令在HTML中动态生成页面编号列表,利用ng-class
指令来添加活动页面的样式。当用户点击页面编号时,通过ng-click
指令调用setCurrentPage
函数来设置currentPage
的值。最后,通过CSS样式来定义分页页面编号的外观。