Question

我的问题是如何显示每页上显示的项目数。

实施例。我有50个项目用于分页。每页10个，所以我想知道当前显示的项目数量。例如，在第一页上显示“从1到10显示项目”，在第二页'显示项目从11到20'...

HTML code：

<div ng-controller="MyCtrl">
    <ul>
        <li ng-repeat="item in data | startFrom:currentPage*pageSize | limitTo:pageSize">
            {{item}}
        </li>
    </ul>
    <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
        Previous
    </button>
    {{currentPage+1}}/{{numberOfPages()}}
    <button ng-disabled="currentPage >= data.length/pageSize - 1" ng-click="currentPage=currentPage+1">
        Next
    </button>

</div>

AngularJs

var app=angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.currentPage = 0;
    $scope.pageSize = 9;
    $scope.start = 0;
    $scope.end = 0;
    $scope.data = [];

    $scope.numberOfPages=function(){
        return Math.ceil($scope.data.length/$scope.pageSize);                
    }

    for (var i=0; i<45; i++) {
        $scope.data.push("Item "+i);
    }
}

//We already have a limitTo filter built-in to angular,
//let's make a startFrom filter
app.filter('startFrom', function() {
    return function(input, start) {
        start = +start; //parse to int
        return input.slice(start);
    }
});

JsFiddle Example

有什么建议吗？

Answer 1

首次更新角度到最新版本，1.4.8截至本文。这很重要，因为在1.1.5之后，您可以在表达式中使用三元语句。看起来你的视图中有大部分逻辑，而有些人可能会说你应该将它移动到控制器或某些服务，这在一天结束时真的取决于你。我已将逻辑放在视图中以匹配您的初始示例。

这是增加的逻辑：

{{(currentPage)*pageSize}} -
{{(currentPage >= data.length/pageSize - 1)?
data.length-1:(currentPage)*pageSize+pageSize-1}}

这是小提琴：

http://jsfiddle.net/mywjhmfy/

如何显示每页上显示的项目数量，AngularJs Pagination

1 个答案: