CODEWITHSUNDEEP
angularjs
Balu
Balu

Reputation: 126

AngularJS: Pagination - restore pages loaded on navigation

I have created a page where there are 2 section (2 controllers and 2 views).

The section in the left has categories (category_selector), and the section on the right displays items in the category that was selected in the left section (category_item_display).

There are many items in a single category, so pagination is implemented in category_item_display.

Pagination works by loading 20 items and then shows a button 'Show More' if there are more items in the category. Clicking the button will add another 20 items to the page.

When an item is clicked, the page is changed to item details page and the item details are displayed.

Now here is the problem.If I click on 'Show More' button once or more, then more than 20 items are displayed in category_item_display. But once I navigate to item details page and then click back button, again the controller loads and shows only 20 items in category_item_display.

So what I did was that the number of items to be loaded is checked from a URL parameter 'loaded_items' first, and if not found then default 20 is picked.

A URL search parameter 'loaded_items=' is added to the address when an item is clicked, and then the address is changed. I did this by having both ng-ref and ng-click on the anchor element, so that ng-click will execute first which has $location.search('loaded_items', count);

I did not want to store the loaded items count in the URL as soon as 'Show More' is clicked, because if I select another category the loaded items will be as per this count.

I want to remove the URL parameter 'loaded_items' on controller init after recording the value somewhere so that the list can be retrieved. But $location.search('loaded_items', null); is reloading the page again and hence the loaded items seems to be items loaded repeated twice.

How can I achieve this?

Thanks in advance

Balu

Upvotes: 0

Views: 80

Answers (1)

Balu
Balu

Reputation: 126

As told by jbrown, I added the items to the service. Along with it, ng-click call back will add the selected item id to the service. Now when I click back button, the item list will be unaltered because it is in the service. Using $anchorScroll in $timeout, the screen can be scrolled to the exact item (using id) that was selected.

Thanks everyone.

Upvotes: 0

Related Questions