实现分页最简单的方法是什么答案

【问题标题】：What is the simplest way to implement pagination实现分页最简单的方法是什么
【发布时间】：2018-02-09 10:31:16
【问题描述】：

我提出请求并获得此 JSON 格式的产品结果：

[{
"Id": 1092,
"Name": "Product Name",
"ItemNumber": 11111111111,
"PictureUrl": "http://www.bealecorner.com/trv900/respat/color-chart.png",
"Categories": [{
    "Code": "43",
    "Label": "CatName"
}],
"Rating": 5,
"NumberOfRatings": 1,
"ProductLanguage": "en" 
}]

我的html：

<div class="item columns large-3 medium-4 small-6 xsmall-12 medium-offset-" column="3" column-size-class="small" ng-repeat="product in products | filter:filters.Categories.Code">
                    <div class="product content-item">
                        <figure><img src="{{product.PictureUrl}}"></figure>
                        <div class="info">
                            <p class="title">{{product.Name}}</p>
                            <p class="subtitle"></p>
                            <div class="mui-product-tile-footer">
                                <div class="mui-js-rating" style="display: block;">
                                    <div class="mui-rating is-small" title="Bewertung: 3">
                                        <i ng-class="{true: 'star-on-png', false: 'star-off-png'}[product.Rating >= 1]"></i>
                                        <i ng-class="{true: 'star-on-png', false: 'star-off-png'}[product.Rating >= 2]"></i>
                                        <i ng-class="{true: 'star-on-png', false: 'star-off-png'}[product.Rating >= 3]"></i>
                                        <i ng-class="{true: 'star-on-png', false: 'star-off-png'}[product.Rating >= 4]"></i>
                                        <i ng-class="{true: 'star-on-png', false: 'star-off-png'}[product.Rating === 5]"></i>
                                    </div>
                                    <div class="mui-rating-counter is-small" aria-label="1 Bewertung"><span>{{product.NumberOfRatings}}</span></div>
                                </div>
                            </div>
                        </div>
                        <a href="#">Produkt bewerten</a>
                    </div>
                </div>

现在我想知道添加分页的最简单方法是什么。我已经告知自己有关 Angular Bootstrap UI 存储库的信息，我不想使用它。

【问题讨论】：

How to do paging in AngularJS?的可能重复
@rakwaht 不，我不想使用 Angular UI
那你在客户端用什么？那里似乎有一些 {{ }}。人们假设你使用 Angular。
@ice13 我假设他也在使用角度，因为它在问题标签中
@ice13 我确实使用角度。不过我不想使用 Angular UI Bootstrap

标签： angular pagination

【解决方案1】：

我认为如果不想依赖外部库，您应该自己实现它。这个解决方案是用ng-repeat实现的：

var app = angular.module('myApp', []);

app.controller('MyCtrl', ['$scope', '$filter', function($scope, $filter) {
  $scope.currentPage = 0;
  $scope.pageSize = 10;
  $scope.data = [];
  $scope.q = '';

  $scope.getData = function() {
    return $filter('filter')($scope.data, $scope.q)
  }

  $scope.numberOfPages = function() {
    return Math.ceil($scope.getData().length / $scope.pageSize);
  }

  for (var i = 0; i < 73; i++) {
    $scope.data.push("LiItem" + i);
  }
}]);

app.filter('startFrom', function() {
  return function(input, start) {
    start = +start; //parse to int
    return input.slice(start);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <input ng-model="q" id="search" class="form-control" placeholder="Filter text">
  <select ng-model="pageSize" id="pageSize" class="form-control">
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="15">15</option>
        <option value="20">20</option>
     </select>
  <ul>
    <li ng-repeat="item in data | filter:q | startFrom:currentPage*pageSize | limitTo:pageSize">
      {{item}}
    </li>
  </ul>
  <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
        Previous
    </button> {{currentPage+1}}/{{numberOfPages()}}
  <button ng-disabled="currentPage >= getData().length/pageSize - 1" ng-click="currentPage=currentPage+1">
        Next
    </button>
</div>

【讨论】：