angularjs实现的前端分页控件

最新推荐文章于 2025-03-01 00:11:04 发布

peakchen90

最新推荐文章于 2025-03-01 00:11:04 发布

阅读量1.4w

点赞数 1

分类专栏： angular 前端开发文章标签： angularjs 分页指令 bootstrap

本文链接：https://blog.youkuaiyun.com/peakchen_90/article/details/52995773

版权

本文介绍了如何使用AngularJS和Bootstrap实现一个前端分页控件。作者分享了从jQuery插件转向AngularJS实现的原因，并提供了angular-pagination.js、index.html和app.js的代码示例。

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

angularjs实现的前端分页控件

前言：之前写个一个jQuery的分页显示插件，http://blog.youkuaiyun.com/peakchen_90/article/details/52187175，存在许多的bug，现在由于业务需要，学习的一点angularjs，重新用angularjs实现了这个分页插件

实现效果图：

（效果图是加上了bootstrap的css文件）

这里写图片描述

用法：

angular-pagination.js代码：

/**
 * angularjs分页控件
 * Created by CHEN on 2016/11/1.
 */

angular.module('myModule', []).directive('myPagination', function () {
   
    return {
        restrict: 'EA',
        replace: true,
        scope: {
            option: '=pageOption'
        },
        template: '<ul class="pagination">' +
        '<li ng-click="pageClick(p)" ng-repeat="p in page" class="{
   {option.curr==p?\'active\':\'\'}}">' +
        '<a href="javascript:;">{
   {p}}</a>' +
        '</li>' +
        '</ul>',
        link: function ($scope) {
   
            //容错处理
            if (!$scope.option.curr || isNaN($scope.option.curr) || $scope.option.curr <

最低0.47元/天解锁文章