To display number of table items using angularjs

Question

I display number of table item on a web page, something like: 20/67, where "20" is the current items on the page and "67" the total number of objects in the array.

HTML

<tr ng-repeat="mydata in data | startFrom:(currentPage - 1) * pageSize | linitTo: pageSize">
            <td>{{ $index + serial }}</td>
            <td>{{mydata.name}}</td>
            <td>{{mydata.age}}</td> 
<tr>  

<div class="pagenumber">
            <strong><p>Page info: {{ pageSize }}/{{ data.length }}</p></strong>
</div>

Controller

$scope.data = data;
    $scope.form = {};
    $scope.pageSize = 20;
    $scope.currentPage = 1;
    $scope.serial = 1; 
    $scope.$watch('currentPage', function() {
            $scope.serial = $scope.currentPage * $scope.pageSize
                    - ($scope.pageSize - 1);
        });

Since my total items are 67, them I'm having 20, 20, 20, 7 items per page.

Going by my HTML code, the "pageSize" will always give 20 which was the size specified in the controller.

How can I fix the code so that I get eg 7/67 for the last page. As in, counting the number of items on every page?

Answer 1

Try this:

controller:

    $scope.$watch('currentPage', function () {
        if ($scope.currentPage * $scope.pageSize < data.length) {
            $scope.currentPageSize = $scope.pageSize;
        }
        else {
            $scope.currentPageSize = data.length % $scope.pageSize
        }
    }

html:

<div class="pagenumber">
        <strong><p>Page info: {{currentPageSize}}/{{ data.length }}</p></strong>
</div>