1

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?

itsme
  • 48,972
  • 96
  • 224
  • 345
Inoubli
  • 374
  • 2
  • 11

2 Answers2

2

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.

Inoubli
  • 374
  • 2
  • 11
0

Usually the correct sintax is something like:

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

hope this helps

itsme
  • 48,972
  • 96
  • 224
  • 345
  • yes that's true , but in my case the pagination might be causing the issue, in my controller i have : todoApp.filter('startFrom', function(){ return function(data, start){ return data.slice(start); } }); – Inoubli May 12 '16 at 16:25