角UI引导给人真棒解决方案。很不巧的分页(ui.bootstrap.pagination)不工作里面的标签(ui.bootstrap.tabs)
DEMO http://plnkr.co/edit / mLBkDwEVY6SIh5oCyy0K?p = preVIEW
rr
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.00r },{r ID:2,r 日期:22日至2015年,r cheque_no:222222,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:3,r 日期:14日至2015年,r cheque_no:33333,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:4,r 日期:16日至4月2015年r cheque_no:44444,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:5,r 日期:30月 - 2015年,r cheque_no:55555,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:6,r 日期:22日至2015年,r cheque_no:222222,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:7,r 日期:14日至2015年,r cheque_no:33333,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:8,r 日期:16日至4月2015年r cheque_no:44444,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:9,r 日期:30月 - 2015年,r cheque_no:55555,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:10,r 日期:22日至2015年,r cheque_no:222222,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:11,r 日期:14日至2015年,r cheque_no:33333,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:12,r 日期:16日至4月2015年r cheque_no:44444,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:13,r 日期:30月 - 2015年,r cheque_no:55555,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:14,r 日期:22日至2015年,r cheque_no:222222,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:15,r 日期:14日至2015年,r cheque_no:33333,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:16,r 日期:16日至4月2015年r cheque_no:44444,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:17,r 日期:30月 - 2015年,r cheque_no:55555,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:18,r 日期:22日至2015年,r cheque_no:222222,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:19,r 日期:14日至2015年,r cheque_no:33333,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:20,r 日期:16日至4月2015年r cheque_no:44444,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:21,r 日期:30月 - 2015年,r cheque_no:55555,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:22,r 日期:22日至2015年,r cheque_no:222222,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:23,r 日期:14日至2015年,r cheque_no:33333,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:24,r 日期:16日至4月2015年r cheque_no:44444,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:25,r 日期:30月 - 2015年,r cheque_no:55555,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:26,r 日期:30月 - 2015年,r cheque_no:55555,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:27,r 日期:22日至2015年,r cheque_no:222222,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:28,r 日期:14日至2015年,r cheque_no:33333,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:29,r 日期:16日至4月2015年r cheque_no:44444,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:30,r 日期:30月 - 2015年,r cheque_no:55555,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:31,r 日期:30月 - 2015年,r cheque_no:55555,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:32,r 日期:22日至2015年,r cheque_no:222222,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:33,r 日期:14日至2015年,r cheque_no:33333,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:34,r 日期:16日至4月2015年r cheque_no:44444,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:35,r 日期:30月 - 2015年,r cheque_no:55555,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:36,r 日期:30月 - 2015年,r cheque_no:55555,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:37,r 日期:22日至2015年,r cheque_no:222222,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:38,r 日期:14日至2015年,r cheque_no:33333,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:39,r 日期:16日至4月2015年r cheque_no:44444,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r },{r ID:40,r 日期:30月 - 2015年,r cheque_no:55555,r 撤回:126.01,r 定金:236.00,r 平衡:953.00r }];rr $范围。$表(当前页+ 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 =容器>rr <&标签集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>
rrr
解决方案您 $观看
不起作用!如果你把的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
相关推荐
最新文章