Using Scroll-Watch with ng-if

[bgadiel]

Hi,
I have a big list of items to show on page in a table.
I would like to watch the scroll value of the element so I'd know which items to show/hide using ng-if.
How can evaluate the scrollable value of the table?
My code is:

<tr ng-repeat="item in displayList track by $index"
                    scroll-watch="{from: 0, to: -1}"
                    ng-if="........">

Thanks.

[pc035860]

Hi @bgadiel ,

Basically you can't use ng-if with scroll-watch on the same <div>, which will also destroy scroll-watch watchers when the expression is false.

I would suggest that you write your own directive and use pure DOM/jQuery to fulfill what you need, since your "big list" might cause performance issues when there are too many ng-* directives and scroll-watch watchers on them.

Or you can describe more about your requirements, maybe there's other way to do it.

[bgadiel]

ok, thank. My problem is that I try to make visible only part of the items from the big list (due to performance issues).
I have tried to add 'Start' and 'End' points on the ng-repeat:
ng-repeat="item in items | limitTo : Start : End"
So I am trying to update the 'Start' and 'End' value when the user is scrolling down.
Is it possible to fire a custom event when the user scrolls down?

[pc035860]

angular-scroll-watch currently doesn't support any viewport-related feature, which means that it can't tell if an element is in-view or not. Maybe you'll wanna check out other modules like

• https://github.com/thenikso/angular-inview
• https://github.com/zumba/angular-waypoints

Personally I think trying to solve the issue with AngularJS itself is not a good idea.
AngularJS doesn't handle the filter performance and DOM operations very well.

I would suggest simply wrap this kind of library with your custom directive and bind required events yourself.
https://clusterize.js.org/

[bgadiel]

Thanks, that info helped!