【问题标题】:AngularJS dynamic pagination: how to limit the maximum visible buttonsAngularJS动态分页:如何限制最大可见按钮
【发布时间】:2014-08-14 13:42:42
【问题描述】:

看了很多分页插件,没看懂,在mongoose、angularjs、express、node stack中手动创建了一个 现在,在我的客户端代码中,我有结果中的项目总数(每次页面更改时从服务器获取结果),因此它们是动态的,而不是固定的,因为可能会有实时更新。所以在我的用户界面中我正在写 -

div.pagination-user.pull-right
                    a.page.gradient(ng-class="{disabled:currentPage == 0}",ng-click="prevPage()") Prev
                    a.page.gradient(ng-repeat="n in range(1,totalItems)",ng-class="{active: n == currentPage}",ng-click="setPage()",ng-bind="n",ng-show="Math.abs(currentPage-n)<3") 1
                    a.page.gradient(ng-class="{disabled:currentPage == pagedItems.length-1}",ng-click="nextPage()") Next

我尝试了 ng-show 属性来检查当前索引是否靠近 currentPage 和 ng-show 是否两端的条件都类似(所以不是 (n-currentPage) 我用 Math.abs(currentPage-n) )

我想这就是我出错的地方,但是如果有另一种方法来限制客户端代码中可见的页面按钮的数量,任何人都可以提出建议

如果在任何情况下我的控制器的代码会影响到这一点,它如下 -

angular.module('app').controller('PaginationDemoCtrl', function($scope,$filter, mvUser) {
    $scope.itemsPerPage = 2;
    $scope.currentPage = 1;
    var paginatedResults = function(page){
        var result = mvUser.query({page:page},function(res){
            $scope.maxSize = 5;
            $scope.totalItems = Math.ceil(res.count/$scope.itemsPerPage);
            $scope.currentPage = res.current;
            $scope.pagedItems = res.results;
        },function(err){
            console.log("some error");
        })
    };
    $scope.setPage = function () {
        $scope.currentPage = this.n;
        paginatedResults($scope.currentPage);
    };
    $scope.prevPage = function () {
        if ($scope.currentPage > 0) {
            $scope.currentPage--;
            paginatedResults($scope.currentPage);
        }
    };
    $scope.range = function (start, end) {
        var ret = [];
        if (!end) {
            end = start;
            start = 0;
        }
        for (var i = start; i < end; i++) {
            ret.push(i);
        }
        return ret;
    };

    $scope.nextPage = function () {
        if ($scope.currentPage < $scope.totalItems - 1) {
            $scope.currentPage++;
            paginatedResults($scope.currentPage);
        }
    };


    paginatedResults($scope.currentPage);

});

【问题讨论】:

    标签: javascript node.js angularjs pagination


    【解决方案1】:

    您是否尝试过使用 #ngTasty 进行分页? http://zizzamia.com/ng-tasty/

    【讨论】:

      猜你喜欢
      • 2018-12-14
      • 1970-01-01
      • 2023-04-03
      • 1970-01-01
      • 2016-11-22
      • 1970-01-01
      • 1970-01-01
      • 2019-03-21
      • 1970-01-01
      相关资源
      最近更新 更多