How to filter data from array and apply infinite scroll using angular js?

This is a slightly more complicated task since the built in angular filter requires all the elements to be in a local array before being able to filter. So you cannot use it, and must move the task of filtering to the server, for example using the sql %like% query.

You need to reuse both the array of records, and the pagination component. So there are 2 use cases:

1. User is viewing unfiltered list
2. User has entered a valid search query and is viewing a filtered list

When user is viewing the unfiltered list, you are querying the API endpoint ex:

server.com/api/records?page=page_number

When the user is viewing a filtered list, you are querying the API endpoint ex:

server.com/api/records?page=page_number&query=mysearchquery

So the entire task becomes:

1. User is viewing unfiltered list

2. User enters a search term in the search box

   • Use a debounce to check the input query for validation, ex: length > 4

3. Front end clears entire list of records, and reset any pagination state

4. Pagination now occuring on the filtered list

When a user clears the search box:

1. Clear the list of filtered records and reset pagination state
2. Begin paginating the unfiltered list once again

If you any specific questions about any part of the process, I'd be happy to update my answer.