如何使用ngrepeat和bootstrap ui使用angularjs創建分頁？

什麼是最簡單的方式來創建分頁？我喜歡用ng-repeat來檢查項目列表，每個項目都有id和name屬性。下一個代碼適用於例如15個項目和顯示2個頁面，但是我想顯示第一個頁面的前10個項目，另一個頁面顯示其他項目...等等，如果我有很多項目。如何使用ngrepeat和bootstrap ui使用angularjs創建分頁？

我的代碼我的嘗試：

<table> 
    <thead><th>id</th><th>name</th></thead> 
    <tbody><tr ng-repeat="item in items"> 
     <td>{{item.id}}</td> 
     <td>{{item.name}}</td> 
    </tr></tbody> 
</table> 
<uib-pagination total-items="totalItems" ng-model="currentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" force-ellipses="true"></uib-pagination> 
<script> 
$scope.items = [] //here i have for example 15 items..it comes through rest 
totalItems = $scope.items.length; //15 
$scope.currentPage=1;//1. page 
$scope.maxSize=4; //maximum 4 page show 
</script>

可能有人幫助我嗎？非常感謝！

來源

2016-04-21 kissmark

你的問題不是很清楚。您是否試圖在每頁顯示固定數量的項目？或者你是否動態地試圖控制每頁的項目數量？ –

ui-bootstrap默認爲每頁10個，所以我只想在一頁中顯示前10項第二頁最後5項....如果35個項目出現：第一頁10秒10第三10和最後5. – kissmark

所以我想每頁最多允許10個項目，當我有超過10個項目時做分頁 – kissmark

你可以看看小提琴手here。基本上，我已經創建了一個自定義過濾器，它將當前頁碼和頁面大小作爲輸入，然後分出需要在UI中顯示的項目。

過濾

myApp.filter('paginate', function() { 
    return function(items, page, pageSize) { 
    if (items === undefined || items === null) 
     return []; 
    if (pageSize === undefined || pageSize === null || pageSize < 0 || pageSize >= items.length) 
     return items; 
    var filtered = []; 
    page = page - 1; 
    console.log(page * pageSize + " " + parseInt((page * pageSize) + pageSize)); 
    filtered = items.slice(page * pageSize, parseInt((page * pageSize) + pageSize)); 
    return filtered; 
    } 
});

HTML

<div ng-controller="MyCtrl"> 
    <div ng-repeat="item in items | paginate: currentPage : pageSize"> 
    {{item}} 
    </div> 
    <input type="number" ng-model="currentPage" /> 
</div>

來源

2016-04-21 18:18:41

非常清晰，非常簡單...非常感謝！ :) – kissmark

很高興幫助！ –

使用的用戶界面的自舉的pagination directive

來源

2016-04-21 17:18:42

如何使用ngrepeat和bootstrap ui使用angularjs創建分頁？

回答

相關問題