什麼是實現分頁

我提出一個要求，讓產品的結果，在這個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存儲庫的信息，我不想使用它。

來源

2017-08-31 deadpool_Y7

的可能的複製【如何做AngularJS傳呼？]（https://stackoverflow.com/questions/10816073/how-to-do-分頁-anglejs） – rakwaht

@rakwaht不，我不想使用Angular UI –

那麼你在客戶端使用什麼？看起來你有一些{{}}。人們假設你使用Angular。 –

我認爲如果不想在外部庫上進行中繼，你應該實現它。該解決方案與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>

來源

2017-08-31 13:13:03 rakwaht

什麼是實現分頁

回答

相關問題