How do I create page items in AngularJS if I know the number of pages?

Question

I am working on a small application that displays a "users" JSON in an HTML5 table. It uses Bootstrap 3 and AngularJS. I want to paginate this table.

I do not have an array to loop through, with ng-repeat. I have a number the number of pages.

With jQuery, I would do:

var pageMax = 10;

var paginationItems = [];
for(var i=0; i<pageMax; i++){
    var paginationItem = '<li><a href="#">' + (i + 1) + '</a></li>';
    paginationItems.push(paginationItem);
}
var paginationSum = paginationItems.reduce((a, b) => a + b, '');
$('.pagination').html(paginationSum);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="text-center">
  <ul class="pagination"></ul>
</div>

What is the equivalent of the above for loop in AngularJS?

any reason not to use [`ui.bootstrap`](https://angular-ui.github.io/bootstrap/#!#pagination)? e.g. `
` — Aleksey Solovey, Jul 13 '18 at 13:53

Gaurav Srivastava · Accepted Answer · 2018-07-13T14:10:18.920

2

In angular you would do something like this:

angular.module('app', [])
  .controller('Controller', function($scope) {
   $scope.pageMax = 10;
   
   $scope.pages = new Array($scope.pageMax);
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<body ng-app="app">
  <div ng-controller="Controller">
    <div class="text-center">
    <h3>Initialized in template:</h3>
      <ul class="pagination">
        <li ng-repeat="n in [].constructor(pageMax) track by $index">
          <a href="#">{{$index+1}}</a>
        </li>
      </ul>
      
      <h3>Initialized in controller:</h3>
      <ul class="pagination">
        <li ng-repeat="n in pages track by $index">
          <a href="#">{{$index+1}}</a>
        </li>
      </ul>
    </div>
  </div>
</body>

edited Jul 13 '18 at 14:10

answered Jul 13 '18 at 13:54

Gaurav Srivastava

3,232
3
16
36

There is a `pageMax` variable in my script. – Razvan Zamfir Jul 13 '18 at 13:56
@RazvanZamfir updated my answer, now you have that variable in the controller. – Gaurav Srivastava Jul 13 '18 at 13:57
1

It works. Would you provide a short explanation of the code, so that I can *understand* it? Thanks! – Razvan Zamfir Jul 13 '18 at 13:59
Is there a reason to use `[].constructor` instead of just `Array`? – Ates Goral Jul 13 '18 at 14:01
@RazvanZamfir basically it initializes an array with 10 empty values. you could also initialize in the controller. – Gaurav Srivastava Jul 13 '18 at 14:08
I mean `[].constructor(pageMax)` and `Array(pageMax)` should be equivalent. – Ates Goral Jul 13 '18 at 14:54
@GauravSrivastava You have "merged" two answers that would be more clear if they were separate. Remember that you can give 2 or more answers (solutions). – Razvan Zamfir Jul 13 '18 at 19:31
@GauravSrivastava Please try answering **[this question](https://stackoverflow.com/questions/53682728/angularjs-1-6-application-bug-turning-items-pagination-into-a-service-does-not)**. It is AngularJS related Thanks! – Razvan Zamfir Dec 08 '18 at 20:38

score 2 · Answer 2 · edited Jul 13 '18 at 14:35

You can use ng-repeat do to this.

Notice that when you want to render the HTML you have to use $sce.trustAsHtml for AngularJS to actually render the HTML. You can then use ng-bind-html in the HTML.

var app = angular.module("Dummy", []);

var DummyController = function($scope, $sce) {
  var pageMax = 10;

  $scope.paginationItems = [];

  for (var i = 0; i < pageMax; i++) {
    var item = $sce.trustAsHtml('<a href="#">' + (i + 1) + '</a>');
    $scope.paginationItems.push(item);
  }
}

app.controller(DummyController, ["$scope, $sce", "DummyController"]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div ng-app="Dummy">
  <div class="text-center" ng-controller="DummyController">
    <ul class="pagination">
      <li ng-bind-html="item" ng-repeat='item in paginationItems'></li>
    </ul>
  </div>
</div>

How do I create page items in AngularJS if I know the number of pages?

2 Answers2