zoukankan      html  css  js  c++  java
  • angular-关于分页

    列表渲染数据量庞大的时候,我们需要用到一个filter来控制我们的列表进行循环渲染。

    这就要用到一个filter,limitTo。

    在此,我使用了变量来进行控制,可以随时调换每页的数量,并且配合分页按钮,进行上一页,下一页等操作。

    //分页
            $scope.begin = 0;
            $scope.limit = 3
            $scope.limitNub = 3;
            window.listLength = 0;
            //获取子控制器当中的跳转页数
            $scope.$on("change", function(event,data){
                $scope.gopages = data;
            });
            
            //首页
            $scope.Home = function (){
                $scope.begin = 0;
            };
            //上一页
            $scope.PgUp = function (){
                $scope.begin -= $scope.limitNub;
                if($scope.begin < 0){
                    $scope.begin = 0;
                }
            };
            //下一页
            $scope.PgDn = function (){
                $scope.begin += $scope.limitNub;
                if($scope.begin > listLength){
                    $scope.begin = Math.floor(listLength/$scope.limitNub)*$scope.limitNub;
                }
            };
            //尾页
            $scope.End = function (){
                $scope.begin = Math.floor(listLength/$scope.limitNub)*$scope.limitNub;
            };
            //去X页
            $scope.goPage = function (){
                if($scope.gopages < (Math.floor(listLength/$scope.limitNub)+2)){
                    $scope.begin = ($scope.gopages-1)*$scope.limitNub;
                }
            };
            
        }])

    当中还使用了$emit和$on方法进行控制器之间的数据通讯,使得去到某页可以具体实现。

    当然,此方法还有待改进,只是先如此使用。

  • 相关阅读:
    Linux基本命令
    IDEA实用插件
    Windows常用快捷键
    IDEA常用快捷键
    OOP三大特性之多态
    IDEA里配置SSM框架,配置没问题却报404错误
    Tomcat的80端口被占用问题_解决方案
    基于SpringBoot开发
    java数据结构--线性表
    代码优化设计(一)
  • 原文地址:https://www.cnblogs.com/yunzhexiaye/p/6826030.html
Copyright © 2011-2022 走看看