javascriptangularjspaginationdirpagination

$index is fixed for all pages using dir-paginate


I am using dirPaginate directive for pagination in my Angular App. its working fine but the problem is I am showing 10 records per page but on every page the $index is repeating same (1-10) on each page. it should be 11-20,21-30 and so on for the next pages.help me how to fix it. this is my code

<tbody dir-paginate="wagedtl in listWagemasterdtls | orderBy:orderByField:reverseSort | filter : detailsfilter |itemsPerPage:10">
<tr><td class="hidden-xs">{{ wagedtl.wageTypeMstrID}}</td><td>{{wagedtl.wageTypeMstrNm}}</td></tr> 
<dir-pagination-controls max-size="5" direction-links="true" boundary-links="true"></dir-pagination-controls>

Solution

  • I solved it in my way. I called a function on page change by on-page-change event of dir-pagination-controls and sent 'newPageNumber'

    <dir-pagination-controls max-size="5" direction-links="true" boundary-links="true" on-page-change='indexCount(newPageNumber)'></dir-pagination-controls> 
    

    in controller I used this logic in function

    $scope.indexCount = function(newPageNumber){
        $scope.serial = newPageNumber * 10 - 9;
    }
    

    And binded the 'serial' with $index in html

    <td>{{ $index + serial}}</td>
    

    By default newPageNumber would be undefined. So I just kept the default value of 'serial' equals 1. in beginning of controller

    $scope.serial = 1;
    

    May be it's not the best way but my problem is solved now...:D