How to keep ng-repeat's $index count while using angular-ui-bootstrap uib-pagination in angularjs

Question

I am using AngularJS v1.6.6 and angular-ui-bootstrap Version: 2.5.0 to create a paginated list built using ng-repeat directive.

Pagination works but every time the page changes the $index variable count starts again, I need to pass this value as parameter in a function so, for example, if I click on first item of second page I need to pass the value 10.

See this fiddle: http://jsfiddle.net/elenat82/vLfLtrxc/

HTML:

<div ng-app="myApp">
<div ng-controller="someController">
<div>list.length = {{list.length}}</div>
<div>currentPage = {{currentPage}}</div>
<div>itemPage = {{itemPage}}</div>
<div>maxSize = {{maxSize}}</div>
<br><br><br><br>
<table>
    <tbody>
        <tr ng-repeat="item in list | pagination:(currentPage-1)*itemPage | limitTo:itemPage track by $index">
            <td>{{ $index +1 }}</td>
            <td>{{ item.task }}</td>
        </tr>
    </tbody>
</table>
<div>
    <ul uib-pagination 
    total-items="list.length" ng-model="currentPage" max-size="maxSize" boundary-links="true" boundary-link-numbers="true" force-ellipses="true" items-per-page="itemPage" first-text="First" last-text="Last" next-text="Next" previous-text="Prev">
    </ul>
</div>

JS:

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

app.controller('someController', function($scope, $filter) {
$scope.list = [
{task: "task n. 1"},
{task: "task n. 2"},
{task: "task n. 3"},
{task: "task n. 4"},
{task: "task n. 5"},
{task: "task n. 6"},
{task: "task n. 7"},
{task: "task n. 8"},
{task: "task n. 9"},
{task: "task n. 10"},
{task: "task n. 11"},
{task: "task n. 12"},
{task: "task n. 13"},
{task: "task n. 14"},
{task: "task n. 15"},
{task: "task n. 16"},
{task: "task n. 17"},
{task: "task n. 18"},
{task: "task n. 19"},
{task: "task n. 20"}
];

$scope.currentPage = 1;
$scope.itemPage = 5;
$scope.maxSize = 5;

});

app.filter('pagination', function () {
  return function (input, start) {
  start = +start;
    if (input) {
        return input.slice(start);
    }
    else {
        return input;
    }
};
});

The below answers are corrects. Please choose this below one. — Ramesh Rajendran
– Ramesh Rajendran, Commented Dec 22, 2017 at 10:35

illeb · Accepted Answer · 2017-12-22 10:12:51Z

3

Sadly, i fear there is no buit-in way to do it.

I would use a simple indexOf to retrieve the absolute position of your element:

<tr ng-repeat="item in list | pagination:(currentPage-1)*itemPage | limitTo:itemPage track by $index">
     <td>{{ list.indexOf(item) + 1 }}</td>
     <td>{{ item.task }}</td>
</tr>

Simple fiddle based on your example: http://jsfiddle.net/zj9c6d52/

answered Dec 22, 2017 at 10:12

illeb

2,9471 gold badge23 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

elenat82 Over a year ago

Thank you Luxor001, your solution works too, here is complete example: jsfiddle.net/elenat82/vLfLtrxc/16 . Too bad I can't accept more than one answer......

illeb Over a year ago

No worries, accept the answer that fits mostly with your use-case, that's what stackoverflow exists for.

Immanuel Kirubaharan · Accepted Answer · 2017-12-22 10:17:07Z

1

Can you try something like the below changes in your code as you can check with this fiddler with your example scenario.

Template:

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

Controller:

  $scope.serial = 1;
  $scope.$watch('currentPage', function(){
    $scope.serial = $scope.currentPage * $scope.itemPage - ($scope.itemPage-1);
  });

edited Dec 22, 2017 at 10:17

answered Dec 22, 2017 at 10:11

Immanuel Kirubaharan

1,1041 gold badge11 silver badges18 bronze badges

3 Comments

elenat82 Over a year ago

Thank you Immanuel, ito works, here is complete example: jsfiddle.net/elenat82/vLfLtrxc/12

svarog Over a year ago

once you start filtering that array, this will break

Immanuel Kirubaharan Over a year ago

@svarog Here you have the working example with filter function with this plunker link.

Andrew Adam · Accepted Answer · 2017-12-22 10:22:42Z

1

How about just quickly calculating it in the DOM like this? :

<td>{{ $index +1 + (currentPage-1)*itemPage }}</td>

answered Dec 22, 2017 at 10:22

Andrew Adam

1,5829 silver badges22 bronze badges

2 Comments

elenat82 Over a year ago

Thank you Andrew, it works and I don't even need to use other variables or functions, here is complete example using your solution: jsfiddle.net/elenat82/vLfLtrxc/14 . Sorry I saw your comment when I had already accepted the other answer.

Andrew Adam Over a year ago

You can still accept this one as well but happy to help anyways! :)

Collectives™ on Stack Overflow

How to keep ng-repeat's $index count while using angular-ui-bootstrap uib-pagination in angularjs

3 Answers 3

2 Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related