Paginate nested elements

[pratimachainani]

Hi,

I am trying to paginate over items which have been purchased through a certain time period. My goal is to display the items annotated by the date they have been purchased. Here is my code snippet,

<div class="date-purchased" ng-repeat="date in dates">
  <div class="items-purchased" dir-paginate="item in items[date] | itemsPerPage:pageSize" currentPage="currentPage">
  </div>
</div>

JSON data source:

{
"28-06-2016":[{itemId: "11", itemName: "item_11"},{itemId: "22", itemName: "item_22"}],
"22-06-2016":[{itemId: "101", itemName: "item_101"},{itemId: "202", itemName: "item_202"},{itemId: "303", itemName: "item_303"}],
"20-06-2016":[{itemId: "1001", itemName: "item_1001"}]
}

However, I end up seeing just the list of dates and the following error on console, "the itemsPerPage id argument does not match a registered pagination-id". Any help with this?

[michaelbromley]

Hi,

Since you will be using multiple pagination instances on a single page, you'll need to explicitly set the pagination-id to some unique value for each instance. This could be as simple as something like:

 <div class="items-purchased" dir-paginate="item in items[date] | itemsPerPage:pageSize" pagination-id="'instance' + $index" currentPage="currentPage">
  </div>

You would then have to use the same pagination id on the corresponding controls.