javascript - 如何显示每个页面上显示了多少项目的信息，AngularJs 分页

Question

我的问题是如何显示每个页面上显示了多少项目。

例。我有 50 个项目显示用于分页。每页 10 个，所以我想了解当前显示的项目数。例如在第一页上是 'Displaying items from 1 to 10' ，在第二页上是 'Displaying items from 11 to 20' ...

HTML代码:

<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

首先将 angular 更新到最新版本，截至本文发布时为 1.4.8。这很重要，因为在 1.1.5 之后，您可以在表达式中使用三元语句。看起来您的大部分逻辑都在您的 View 中，虽然有些人可能会说您应该将其移至 Controller 或某些服务，但这最终取决于您。我已将逻辑放在 View 中以匹配您的初始示例。

这是添加的逻辑:

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

这是 fiddle :

http://jsfiddle.net/mywjhmfy/