Angular UI Bootstrap分页在ui.bootstrap.tabs内部不起作用

Question

Angular UI bootstrap gives awesome solutions. Very unfortunately Pagination (ui.bootstrap.pagination) does not working inside Tabs (ui.bootstrap.tabs)

DEMO http://plnkr.co/edit/mLBkDwEVY6SIh5oCyy0K?p=preview

 angular.module('mytodos', ['ui.bootstrap']).controller('TodoController', function($scope) { $scope.filteredTodos = []; $scope.currentPage = 1; $scope.numPerPage = 10; $scope.maxSize = 5; $scope.todos = [{ "id": 1, "date": "12-Jan-2015", "cheque_no": 11111, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 2, "date": "22-February-2015", "cheque_no": 222222, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 3, "date": "14-March-2015", "cheque_no": 33333, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 4, "date": "16-April-2015", "cheque_no": 44444, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 5, "date": "30-May-2015", "cheque_no": 55555, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 6, "date": "22-February-2015", "cheque_no": 222222, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 7, "date": "14-March-2015", "cheque_no": 33333, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 8, "date": "16-April-2015", "cheque_no": 44444, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 9, "date": "30-May-2015", "cheque_no": 55555, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 10, "date": "22-February-2015", "cheque_no": 222222, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 11, "date": "14-March-2015", "cheque_no": 33333, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 12, "date": "16-April-2015", "cheque_no": 44444, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 13, "date": "30-May-2015", "cheque_no": 55555, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 14, "date": "22-February-2015", "cheque_no": 222222, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 15, "date": "14-March-2015", "cheque_no": 33333, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 16, "date": "16-April-2015", "cheque_no": 44444, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 17, "date": "30-May-2015", "cheque_no": 55555, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 18, "date": "22-February-2015", "cheque_no": 222222, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 19, "date": "14-March-2015", "cheque_no": 33333, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 20, "date": "16-April-2015", "cheque_no": 44444, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 21, "date": "30-May-2015", "cheque_no": 55555, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 22, "date": "22-February-2015", "cheque_no": 222222, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 23, "date": "14-March-2015", "cheque_no": 33333, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 24, "date": "16-April-2015", "cheque_no": 44444, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 25, "date": "30-May-2015", "cheque_no": 55555, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 26, "date": "30-May-2015", "cheque_no": 55555, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 27, "date": "22-February-2015", "cheque_no": 222222, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 28, "date": "14-March-2015", "cheque_no": 33333, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 29, "date": "16-April-2015", "cheque_no": 44444, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 30, "date": "30-May-2015", "cheque_no": 55555, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 31, "date": "30-May-2015", "cheque_no": 55555, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 32, "date": "22-February-2015", "cheque_no": 222222, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 33, "date": "14-March-2015", "cheque_no": 33333, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 34, "date": "16-April-2015", "cheque_no": 44444, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 35, "date": "30-May-2015", "cheque_no": 55555, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 36, "date": "30-May-2015", "cheque_no": 55555, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 37, "date": "22-February-2015", "cheque_no": 222222, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 38, "date": "14-March-2015", "cheque_no": 33333, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 39, "date": "16-April-2015", "cheque_no": 44444, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 40, "date": "30-May-2015", "cheque_no": 55555, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }]; $scope.$watch('currentPage + numPerPage', function() { var begin = (($scope.currentPage - 1) * $scope.numPerPage), end = begin + $scope.numPerPage; $scope.filteredTodos = $scope.todos.slice(begin, end); }); }); 

 .box { border: 1px solid #DDD; padding: 10px; position: relative; background: #FFF; margin: 0 0 10px; } .tab-content > .tab-pane > .box { border-top: none; } .tab-content > .box { border-top: none; } 

 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script> <div ng-app="mytodos" ng-controller="TodoController"> <div class="container"> <tabset> <tab> <tab-heading>Statement</tab-heading> <div class="box"> <h1>Todos</h1> <h4>{{todos.length}} total</h4> <ul> <li ng-repeat="todo in filteredTodos">{{todo.id}} Index: {{$index}}</li> </ul> <pagination ng-model="currentPage" total-items="todos.length" max-size="maxSize" boundary-links="true"> </pagination> </div> </tab> </tabset> </div> </div> 

Answer 1

Your $watch doesn't work! If you put console.log($scope.currentPage) inside your $watch function you will see, that there will be no output when the page changes.

I recommend using ng-change on the pagination element and define a function on the scope (instead of the $watch)!

@see http://angular-ui.github.io/bootstrap/#/pagination

To make sure that the currentPage model is updated you can set an object instead of just an integer (key to scope inheritance!)

// JS
$scope.pagination = { currentPage: 1 };
// HTML
<pagination ng-model="pagination.currentPage">

I recommend reading this article: https://github.com/angular/angular.js/wiki/Understanding-Scopes

Answer 2

Finally found solution with filter() instead of worry about $scope

 angular.module('mytodos', ['ui.bootstrap']).controller('TodoController', function($scope) { $scope.filteredTodos = []; $scope.currentPage = 1; $scope.numPerPage = 10; $scope.maxSize = 5; $scope.todos = [{ "id": 1, "date": "12-Jan-2015", "cheque_no": 11111, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 2, "date": "22-February-2015", "cheque_no": 222222, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 3, "date": "14-March-2015", "cheque_no": 33333, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 4, "date": "16-April-2015", "cheque_no": 44444, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 5, "date": "30-May-2015", "cheque_no": 55555, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 6, "date": "22-February-2015", "cheque_no": 222222, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 7, "date": "14-March-2015", "cheque_no": 33333, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 8, "date": "16-April-2015", "cheque_no": 44444, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 9, "date": "30-May-2015", "cheque_no": 55555, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 10, "date": "22-February-2015", "cheque_no": 222222, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 11, "date": "14-March-2015", "cheque_no": 33333, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 12, "date": "16-April-2015", "cheque_no": 44444, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 13, "date": "30-May-2015", "cheque_no": 55555, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 14, "date": "22-February-2015", "cheque_no": 222222, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 15, "date": "14-March-2015", "cheque_no": 33333, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 16, "date": "16-April-2015", "cheque_no": 44444, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 17, "date": "30-May-2015", "cheque_no": 55555, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 18, "date": "22-February-2015", "cheque_no": 222222, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 19, "date": "14-March-2015", "cheque_no": 33333, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 20, "date": "16-April-2015", "cheque_no": 44444, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 21, "date": "30-May-2015", "cheque_no": 55555, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 22, "date": "22-February-2015", "cheque_no": 222222, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 23, "date": "14-March-2015", "cheque_no": 33333, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 24, "date": "16-April-2015", "cheque_no": 44444, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 25, "date": "30-May-2015", "cheque_no": 55555, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 26, "date": "30-May-2015", "cheque_no": 55555, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 27, "date": "22-February-2015", "cheque_no": 222222, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 28, "date": "14-March-2015", "cheque_no": 33333, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 29, "date": "16-April-2015", "cheque_no": 44444, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 30, "date": "30-May-2015", "cheque_no": 55555, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 31, "date": "30-May-2015", "cheque_no": 55555, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 32, "date": "22-February-2015", "cheque_no": 222222, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 33, "date": "14-March-2015", "cheque_no": 33333, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 34, "date": "16-April-2015", "cheque_no": 44444, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 35, "date": "30-May-2015", "cheque_no": 55555, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 36, "date": "30-May-2015", "cheque_no": 55555, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 37, "date": "22-February-2015", "cheque_no": 222222, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 38, "date": "14-March-2015", "cheque_no": 33333, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 39, "date": "16-April-2015", "cheque_no": 44444, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }, { "id": 40, "date": "30-May-2015", "cheque_no": 55555, "withdraw": 126.01, "deposit": 236.00, "balance": 953.00 }]; }).filter('pagination', function() { return function(input, currentPage, pageSize) { if(angular.isArray(input)) { var start = (currentPage-1)*pageSize; var end = currentPage*pageSize; return input.slice(start, end); } }; }); 

 .box { border: 1px solid #DDD; padding: 10px; position: relative; background: #FFF; margin: 0 0 10px; } .tab-content > .tab-pane > .box { border-top: none; } .tab-content > .box { border-top: none; } 

 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script> <div ng-app="mytodos" ng-controller="TodoController"> <div class="container"> <tabset> <tab> <tab-heading>Statement</tab-heading> <div class="box"> <h1>Todos</h1> <h4>{{todos.length}} total</h4> <ul> <li ng-repeat="todo in todos| pagination: currentPage : numPerPage">{{todo.id}} Index: {{$index}}</li> </ul> <pagination ng-model="currentPage" total-items="todos.length" max-size="maxSize" boundary-links="true"> </pagination> </div> </tab> </tabset> </div> </div> 

Answer 3

试试这个

<script data-require="ui-bootstrap@*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>