角UI引导给人真棒解决方案。很不巧的分页(ui.bootstrap.pagination)不工作里面的标签(ui.bootstrap.tabs)
DEMO http://plnkr.co/edit / mLBkDwEVY6SIh5oCyy0K?p = preVIEW
\r\r
angular.module('mytodos',['ui.bootstrap'])。控制器('TodoController',函数($范围){\r $ scope.filteredTodos = [];\r $ scope.currentPage = 1;\r $ scope.numPerPage = 10;\r $ scope.maxSize = 5;\r $ scope.todos = [{\r 标识:1,\r 日期:12-JAN-2015,\r cheque_no:11111,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:2,\r 日期:22日至2015年,\r cheque_no:222222,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:3,\r 日期:14日至2015年,\r cheque_no:33333,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:4,\r 日期:16日至4月2015年\r cheque_no:44444,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:5,\r 日期:30月 - 2015年,\r cheque_no:55555,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:6,\r 日期:22日至2015年,\r cheque_no:222222,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:7,\r 日期:14日至2015年,\r cheque_no:33333,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:8,\r 日期:16日至4月2015年\r cheque_no:44444,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:9,\r 日期:30月 - 2015年,\r cheque_no:55555,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:10,\r 日期:22日至2015年,\r cheque_no:222222,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:11,\r 日期:14日至2015年,\r cheque_no:33333,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:12,\r 日期:16日至4月2015年\r cheque_no:44444,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:13,\r 日期:30月 - 2015年,\r cheque_no:55555,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:14,\r 日期:22日至2015年,\r cheque_no:222222,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:15,\r 日期:14日至2015年,\r cheque_no:33333,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:16,\r 日期:16日至4月2015年\r cheque_no:44444,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:17,\r 日期:30月 - 2015年,\r cheque_no:55555,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:18,\r 日期:22日至2015年,\r cheque_no:222222,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:19,\r 日期:14日至2015年,\r cheque_no:33333,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:20,\r 日期:16日至4月2015年\r cheque_no:44444,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:21,\r 日期:30月 - 2015年,\r cheque_no:55555,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:22,\r 日期:22日至2015年,\r cheque_no:222222,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:23,\r 日期:14日至2015年,\r cheque_no:33333,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:24,\r 日期:16日至4月2015年\r cheque_no:44444,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:25,\r 日期:30月 - 2015年,\r cheque_no:55555,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:26,\r 日期:30月 - 2015年,\r cheque_no:55555,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:27,\r 日期:22日至2015年,\r cheque_no:222222,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:28,\r 日期:14日至2015年,\r cheque_no:33333,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:29,\r 日期:16日至4月2015年\r cheque_no:44444,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:30,\r 日期:30月 - 2015年,\r cheque_no:55555,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:31,\r 日期:30月 - 2015年,\r cheque_no:55555,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:32,\r 日期:22日至2015年,\r cheque_no:222222,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:33,\r 日期:14日至2015年,\r cheque_no:33333,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:34,\r 日期:16日至4月2015年\r cheque_no:44444,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:35,\r 日期:30月 - 2015年,\r cheque_no:55555,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:36,\r 日期:30月 - 2015年,\r cheque_no:55555,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:37,\r 日期:22日至2015年,\r cheque_no:222222,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:38,\r 日期:14日至2015年,\r cheque_no:33333,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:39,\r 日期:16日至4月2015年\r cheque_no:44444,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r },{\r ID:40,\r 日期:30月 - 2015年,\r cheque_no:55555,\r 撤回:126.01,\r 定金:236.00,\r 平衡:953.00\r }];\r\r $范围。$表(当前页+ numPerPage',函数(){\r VAR开始=(($ scope.currentPage - 1)* $ scope.numPerPage)\r 最终=开始+ $ scope.numPerPage;\r $ scope.filteredTodos = $ scope.todos.slice(开始,结束);\r });\r});
\r
.box的{\r 边框:1px的固体#DDD;\r 填充:10px的;\r 位置:相对;\r 背景:#FFF;\r 保证金:0 0 10px的;\r}\r.TAB内容> .TAB窗格> .box的{\r 边境顶:无;\r}\r.TAB内容> .box的{\r 边境顶:无;\r}
\r
<链接HREF =http://maxcdn.bootstrapcdn.com/bootstrap /3.3.1/css/bootstrap.min.css的rel =stylesheet属性/>\r&所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js>&下; /脚本>\r&所述; SCRIPT SRC =http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js>&下; /脚本>\r< DIV NG-应用=mytodosNG控制器=TodoController>\r < DIV CLASS =容器>\r\r <&标签集GT;\r <标签>\r <标签,标题为GT;&声明LT; /制表标题>\r < DIV CLASS =盒子>\r < H1>&托多斯LT; / H1>\r < H4> {{todos.length}}总与LT; / H4>\r < UL>\r <李NG重复=待办事项中filteredTodos> {{todo.id}}指数:{{$指数}}< /李>\r < / UL>\r <分页NG模型=当前页总项=todos.length最大规模=最大范围边界链接=真正的>\r < /分页>\r < / DIV>\r < /标签>\r < /标签集>\r < / DIV>\r< / DIV>
\r\r\r
解决方案您 $观看
不起作用!如果你把的console.log($ scope.currentPage)
你的 $观看
函数里,你会看到,将有无输出时的页面变化。
我推荐使用 NG-变化
分页元素和范围(而不是$表)定义一个函数!
http://angular-ui.github.io/bootstrap/#/分页
要确保在当前页模型更新,您可以设置一个对象,而不是仅仅是一个整数(关键范围继承!)
// JS$ scope.pagination = {当前页:1};// HTML<分页NG模型=pagination.currentPage>
我建议你阅读这篇文章: https://github.com/angular/ angular.js /维基/了解,斯科普斯
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>
解决方案
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