Generate href list dynamically in AngularJS

Question

I am implementing server side pagination in AngularJS following the code at laravel-tricks

I pass pageNumber to the API and it returns the total number of results and other data on that page in the results. The data is then displayed in the table.

How can I generate a list of hrefs for pages dynamically when the results are received ?

Note 1: I have tried ngTable, but it doesn't update the table when the data is changed though it does update the model. Hence resorted to manual pagination since I need a basic pagination only

Note 2: I am not using Bootstrap there for pagination provided by AngularUI is not of any use.

I don't understand. Why do you need hrefs in this example? The pages are being loaded with AJAX. Are you looking to implement URL routing? — Bradley Trager
– Bradley Trager, Commented Mar 12, 2014 at 15:39
I only want to show the pages numbered below the table so that the user may navigate directly to a page — krammer
– krammer, Commented Mar 12, 2014 at 15:59
I'd say just make loadPage take the page number, then add <a ng-repeat='page in pages' ng-click='loadPage(page)'>{{page}}</a>. Is there a reason you specifically need to generate href? — SlightlyCuban
– SlightlyCuban, Commented Mar 12, 2014 at 16:17

Bradley Trager · Accepted Answer · 2014-03-12 17:50:31Z

1

You can do something like this:

//Generate pagination buttons, each with the ng-click directive
<button ng-repeat="pageNumber in [1, 2, 3, 4, 5]" ng-click="goToPage(pageNumber)">
  <span ng-bind="pageNumber"></span>
</button>

Then have a goToPage function in your controller like this:

 $scope.goToPage = function(pageNumber) {    
     $scope.main.page = pageNumber;
     $scope.loadPage();    
 };

NOTE: I just used [1, 2, 3, 4, 5] as an example, but you may want to generate that array in your controller.

answered Mar 12, 2014 at 17:50

Bradley Trager

3,5903 gold badges29 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

krammer Over a year ago

thanks I have a very large number of pages. (in hundreds). How to manage them in the ui ?

Bradley Trager Over a year ago

Maybe you could use a text input to jump to a page. Maybe post the question here: ux.stackexchange.com

Collectives™ on Stack Overflow

Generate href list dynamically in AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related