MVP, Author

ASP.Net MVC Infinite Scrolling With Angularjs

Hits: 3544

Today we are going to implement infinite/unlimited scrolling using AngularJS in MVC application.

Infinite/unlimited scroll worked while we scroll down the web page it’ll automatically load next paged data. Facebook has this type of News feed loading.

Let’s Get Started:

Let’s create a view with directive ‘when-scrolled’. AngularJS ‘when-scrolled’ directive is to implement infinite scrolling, which is suppose to detect the div scroll.

Here ‘loadData(1)’ callback function will get called while div/page is scrolled. In this method we have passed parameter value ‘1’ to detect, is it default data load or scroll load call.

This is where we passed the parameter in our ngController method.

Finally the View:

We have declare directive ‘when-scrolled’ in our view, now we have to add directive in our module. In this app which is:

The directive: This will detect the scroll position of page/div.

In out controller method we have pushed data into the array in scope to update the view.

As we know AngularJS will update the view when scope is changed/update.

Finally the Script:



Happy Coding 🙂


Post a comment