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
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.
Related
I'm facing a problem I don't know how to resolve.
I created a favourite tab containing all the characters the user saved.
In the favourite page it displays the tab.
The user can remove an item from his favourite by clicking on the top icon heart.
It works perfectly, the item is instantly removed but if I'm on the second page, and remove all the items from the page, I get a blank screen even if the pagination updates accordly (from 2 pages to 1).
I have to refresh manually the page so that it show the remaining items.
How can I force to refresh the page automatically ?
You can see on the image that when the item is deleted, the page 2 is deleted but I'm still on the deleted page (the 1 on pagination is not bold).
I have an application page , where clicking on button "find product" , goes to search products page with a list of products mapped search criteria selected on previous page.
page 1. search criteria, "find product" button
page 2. products list matching search criteria
I would like to track "find product" click event. As soon as find product button clicked, user will be navigated to page 2.
Not sure, if a page load is occurring on a button click, will I be able to capture and track button click event ?
I am thinking to use "utag.link" implementation for this.
May be I am wrong, any suggestions helpful.
-Thanks.
You could add the utag.link event on the mousedown interaction to give you a few milliseconds head start on the tracking.
I have a long list of items and on item click it will go to item description page i am using state.go() method to navigate. The problem is When I scroll down say some 30 or 50 elements and tap on item it will show that items description, when I press back button,the position of the list not retaining to previous position instead it is set to the top.
is there a way to set different number of items to display in views that has ajax pager? For example on first load, you have 10 items, after you click loadmore to load another list, you can get 15 items instead.
Thank you for your wisdom!
views show more has this functionality.
I have a nested list with a template by using getItemTextTpl. Template is simple it checks for a flag and if true it shows a button on a list item. If false show no button.
When on the list item I press the button (It's a delete button) I want to refresh that list item to not show the button. To make the button change I have to navigate up two levels and back down for it to update the list item.
My problem is getting the list item to refresh/Update. Can force the template to check the list item again etc? I can get the button to fire the event.
Thanks!
for the display layer:
why not just use css to apply/change the class of the delete button to hide it? then you don't have to refesh anything.
then you can programically set the value in your code, or send to the server to make sure the status is set when the view reloads at another point.