How to do paging in AngularJS?

后端 未结 21 1901
轮回少年
轮回少年 2020-11-22 07:17

I have a dataset of about 1000 items in-memory and am attempting to create a pager for this dataset, but I\'m not sure on how to do this.

I\'m using a custom filter

21条回答
  •  慢半拍i
    慢半拍i (楼主)
    2020-11-22 07:45

    You can easily do this using Bootstrap UI directive.

    This answer is a modification of the answer given by @Scotty.NET, I have changed the code because directive is deprecated now.

    Following code generates the pagination:

    To make it functional, use this in your controller:

    $scope.filteredData = []
    $scope.totalItems = $scope.data.length;
    $scope.currentPage = 1;
    $scope.itemsPerPage = 5;
    
    $scope.setPage = function (pageNo) {
        $scope.currentPage = pageNo;
    };
    
    $scope.pageChanged = function() {
        var begin = (($scope.currentPage - 1) * $scope.itemsPerPage)
        , end = begin + $scope.itemsPerPage;
    
        $scope.filteredData = $scope.data.slice(begin, end);
    };
    
    $scope.pageChanged();
    

    Refer to this for more options of pagination: Bootstrap UI Pagination Directive

提交回复
热议问题