Question

我发出请求并获得此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存储库，我不想使用它。

Answer 1

我认为如果不想在外部图书馆进行转播，你应该自己实施。此解决方案使用ng-repeat：

实施

＆＃13;

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);
  }
});

＆＃13;

<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>

＆＃13;

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

1 个答案: