How to do paging in AngularJS?

Question

I have a dataset of about 1000 items in-memory and am attempting to create a pager for this dataset, but I\'m not sure on how to do this.

I\'m using a custom filter

Answer 1

Old question but since I think my approach is a bit different and less complex I will share this and hope that someone besides me find it useful.

What I found to be an easy and small solution to pagination is to combine a directive with a filter which uses the same scope variables.

To implement this you add the filter on the array and add the directiv like this

    

        

            

                
Name
                
Price
                
Quantity
            
        
        

            

                
{{item.Name}}
                
{{item.Price}}
                
{{item.Quantity}}
            
        
    
    

p_Size and p_Step are scope variables which can be customized in the scope else the default value of the p_Size is 5 and p_Step is 1.

When a step is change in the pagination the p_Step is updated and will trigger a new filtering by cust_pagination filter. The cust_pagination filter then slices the array depending on the p_Step value like below and only return the active records selected in the pagination section

var startIndex = nStep * nPageSize;
var endIndex = startIndex + nPageSize;
var arr = items.slice(startIndex, endIndex);
return arr;

DEMO View the complete solution in this plunker