CODEWITHSUNDEEP
angularjsfilterpaginationangularjs-ng-repeatangularjs-track-by
Inoubli
Inoubli

Reputation: 374

ng-repeat track by $index not working with pagination

I'm working with ng-repeat + Filter + Pagination(ui-bootstrap)

1- ng-repeat + filter is working fine :

<tr data-ng-repeat="target in targets | filter:search track by $index">

2- ng-repeat + filter + pagination is working fine too:

<tr data-ng-repeat="target in targets | filter:search  | startFrom:(currentPage - 1) * pageSize  | limitTo: pageSize ">

3- the problem is when I combine ng-repeat + Filter + Pagination + track by $index 

<tr data-ng-repeat="target in targets | filter:search  | startFrom:(currentPage - 1) * pageSize  | limitTo: pageSize track by $index">

I get my index value restart from 0 to 4 in each page

here is a screen shot of my table

Any Idea about the correct order for "track by $index" ! where should I place it?

Upvotes: 1

Views: 1568

Answers (2)

Inoubli
Inoubli

Reputation: 374

Finaly I 've fixed my issue with another logic, I was using track by $index for editing selected row field in my table like this:

<td><input class="todo" type="text" ng-model-options="{ updateOn: 'blur' }" ng-change="updateTarget(targets[$index])" ng-model="target.YEAR"></td>
<td><input class="todo" type="text" ng-model-options="{ updateOn: 'blur' }" ng-change="updateTarget(targets[$index])" ng-model="target.MONTH"></td>

Now I deleted track by $index from my ng-repeat, and I changed my td to:

<td><input style="width:40px" class="todo" type="text" ng-model-options="{ updateOn: 'blur' }" ng-change="updateTarget(target)" ng-model="target.YEAR"></td>
<td><input style="width:40px" class="todo" type="text" ng-model-options="{ updateOn: 'blur' }" ng-change="updateTarget(target)" ng-model="target.MONTH"></td>

So on ng-change , my update function will be called with all the object as a parameter, no need to $index to determine the current object.

Upvotes: 2

Filippo oretti
Filippo oretti

Reputation: 49813

Usually the correct sintax is something like:

<div ng-repeat="item in items track by $index | my filter....">

hope this helps

Upvotes: 0

Related Questions