Collection-repeat and rememberScrollPosition

1

Hello
I am trying to make collection repeat remember it s scrolling position after navigating to a detail view and back…
Is there a simple codepen for that? should it work out of the box?

Cheers

2

Should work right out of the box. Collection repeat is similar to using ng-repeat, just highly optimized.

3

@mhartington could you please provide some codepen which remembers the scroll position in the collection repeat.

Thanks!

4

Yeah, here you go

5

Awesome simple example @mhartington many thanks!

Any tips for adjusting that output to have the text on the right of the image instead of underneath?

So it looks more like:

Thanks again!

6

You use the class item-thumbnail-left

  <a class="item my-item item-thumbnail-left"
    collection-repeat="pet in pets"
    collection-item-height="90"
    collection-item-width="'100%'"
     ui-sref="detail({petsId: pet.id })">
    <img ng-src="http://placekitten.com/60/{{55 + ($index % 10)}}">
   <h2>{{pet.firstName}}</h2>
   <p>{{pet.id}}</p>
      
  </a>

The codepen has ben updated to reflect this.

1 Like
7

Thanks very much, that’s a great help :slight_smile:

8

hello
i just changed your example so that the service to get the data uses a promise.

the scroll position is not remembered in that case.
What is the best way to handle that?

Cheers

9

Set delegate-handle to HTML ion-content, and in JS get delegate from the handle.
And when setting $scope.pets, call scrollToRememberedPosition of the delegate.
Check the source below: