![](/img/trans.png)
[英]Angular-ui-bootstrap — unable to disable tabs inside ng-repeat
[英]How to create pagination using ng-repeat with angular-ui-bootstrap?
我想實現uib-pagination,我在$scope.event
有數據,我想顯示分頁,但是它本身沒有顯示分頁指令,任何想法實現錯誤我都不會在控制台中看到任何錯誤。 還是有更好的方法來完成此任務?
main.html
<div class="panel-body display-logs" scroll-bottom="event">
<ul style="list-style: none;">
<li ng-repeat="message in event track by message.id" ng-class="{lastItem: $last}"><span><strong>Log:</strong></span><span>{{message.value}}</span></li>
</ul>
</div>
<uib-pagination total-items="event.length" ng-model='currentPage' items-per-page='pageSize' boundary-links="true">
</uib-pagination>
Ctrl.js
$scope.event = [];
$scope.pageSize=5,
$scope.currentPage=1;
event.json
[{
"id": 0,
"value": "Lorem test Ipsuver since the 1500s,but also the leap into electronic typesetting, remaining essentially unchanged."
}, {
"id": 1,
"value": "-19170aee171f a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."
}, {
"id": 2,
"value": "19-9de6-19170aee171f a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."
}, {
"id": 3,
"value": "ee171f a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."
}]
<div class="panel-body display-logs" scroll-bottom="event">
<ul style="list-style: none;">
<li ng-repeat="message in event | limitTo : pageSize : (currentPage - 1) * pageSize track by message.id"
ng-class="{lastItem: $last}">
<strong>{{ message.id }} --- Log: </strong>
<span>{{ message.value }}</span>
</li>
</ul>
</div>
<ul uib-pagination
total-items="totalItems"
ng-model="currentPage"
items-per-page="pageSize"></ul>
請參閱插件: http ://plnkr.co/edit/YLCmEoTzhUz312X2htuB?p=preview
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.