Home Hacker News Hacker News Clone in AngularJS – Post 3, Part C on-page-change option for dir-pagination-controls

Hacker News Clone in AngularJS – Post 3, Part C on-page-change option for dir-pagination-controls

24
0

Building a Hacker News Clone in AngularJS – Part 3

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.

Building a Hacker News Clone in AngularJS – Part 3

The 3rd blog post of the series covers implementing AngularJS pagination using a library by Michael Bromley:

https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

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.

source

LEAVE YOUR COMMENT

Your email address will not be published. Required fields are marked *

WordPress Anti Spam by WP-SpamShield

Close

Powered by moviekillers.com