brantwills/Angular-Paging

Unable to display items

brantwills opened this issue · 5 comments

Created per Femina in issue #44


div paging
page=curPage
page-size=pageSize
total=items.length
scroll-top="true"
show-prev-next="true"
class="pagination"
/div

I am using your "paging directive" and in item_container I implemented as follows. ( curPage: 1, PageSize 18, Item count 11).
div ng-repeat="data in items | paginate: curPage * pageSize | limitTo: pageSize". But, I am not able to display items. I know i am missing to notice some minor thing. Thanks

Hey @Femina

The items may not be displaying as the curPage value is set to one (1)
I'm not sure what the paginate filter is doing, but it may expect a zero based value in curPage?

For Example:
1 [curPage] * 18 [pageSize] = 18 to 36
0 [curPage] * 18 [pageSize] = 0 to 18

I've created plunkr: http://plnkr.co/edit/4xJrQRLkp8JCT9xnvttX?p=preview
Feel free to edit the plunker to better match your environment!

.filter('paginate', function()
{
return function(input, start)
{
if (!input || !input.length) { return; }
start = +start;
return input.slice(start);
};
});

.filter('slice', function() {
return function(arr, start, end)
{
return (arr || []).slice(start, end);
};
});

As your plunker, Yes items not visible. Actually, I tried with curPage Value "0" also. Still it isnt working .

What is the best way to implement "paging" with html ng-repeat? I guess I am doing mistake there.

I've updated the plunkr to use your filters:
http://plnkr.co/edit/4xJrQRLkp8JCT9xnvttX?p=preview

Make sure that you are setting your paginate filter to paginate: (curPage-1) * pageSize
By manually setting curPage = 0, in say the app.js file, the directive will override this to 1
(See src/paging.js line 120)

Looks like everything is working as expected in the plunkr, are you not able to view the items properly?
Feel free to use the working code in the plunkr or modify the plunkr to better suit your environment

  <!-- Working ng-repeat Example -->
  <div ng-repeat="data in items | paginate: (curPage-1) * pageSize | limitTo: pageSize">
    {{data}}
  </div>

@brantwills
Great it worked. Awesome, Thank you.

No problemo, closing out this issue