如果我知道页数，如何在 AngularJS 中创建页面项？答案

【问题标题】：How do I create page items in AngularJS if I know the number of pages?如果我知道页数，如何在 AngularJS 中创建页面项？
【发布时间】：2018-07-13 13:50:27
【问题描述】：

我正在开发一个在HTML5 表格 中显示“用户”JSON 的小型应用程序。它使用 Bootstrap 3 和 AngularJS。我想给这张表分页。

我没有使用 ng-repeat 循环遍历的数组。我有一个 number页数。

使用 jQuery，我会这样做：

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>

AngularJS 中上述 for 循环的等价物是什么？

【问题讨论】：

有什么理由不使用ui.bootstrap？例如<ul uib-pagination ...></ul>
我不明白你的问题。

标签： javascript jquery html angularjs

【解决方案1】：

在角度你会做这样的事情：

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>

【讨论】：

我的脚本中有一个pageMax 变量。
@RazvanZamfir 更新了我的答案，现在您在控制器中有该变量。
它有效。您能提供代码的简短说明，以便我理解吗？谢谢！
是否有理由使用[].constructor 而不仅仅是Array？
@RazvanZamfir 基本上它用 10 个空值初始化一个数组。你也可以在控制器中初始化。

【解决方案2】：

您可以使用ng-repeat 来执行此操作。

请注意，当您要渲染 HTML 时，您必须使用 $sce.trustAsHtml 才能让 AngularJS 实际渲染 HTML。然后您可以在HTML 中使用ng-bind-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>

【讨论】：