Hacker News Clone in AngularJS – Post 3, Part C on-page-change option for dir-pagination-controls
Hi Everyone! I’m Dakota Lee Martinez. In this video series I’ll be using the Hacker News API to build out a Hacker News Clone in AngularJS.
These videos are accompanied by a series of blog posts at becomingaprogrammer.com. You can find the written explanation of the process and code samples there.
The 3rd blog post of the series covers implementing AngularJS pagination using a library by Michael Bromley:
In this video we’re going to use the on-page-change option on the dir-pagination-controls directive to solve the numbering issue (each page has different stories, but they’re all numbered 1-30).
In the previous video I implemented a different solution using the indexOf method to get the index of the current story within the top stories collection, added 1 to it and then displayed the number. This solution gave us issues with our presentation. So here is a better way:
Here are the tasks we’ll complete to fix the numbering issue:
* Defining an updatePage method on our TopStoriesController’s $scope
* Using the on-page-change option on the dir-pagination-controls directive to call the updatePage method
* Defining the vm.start property in the TopStoriesController to keep track of what number the list should start on.
* Cleaning up the top-stories.html view and adding the ‘start’ property to the ol tag so that the list starts on the proper number.