角UI分页引导里面没有ui.bootstrap.tabs工作 [英] Angular UI bootstrap pagination not working inside ui.bootstrap.tabs
问题描述
角UI引导给人真棒解决方案。很不巧的分页(ui.bootstrap.pagination)不工作里面的标签(ui.bootstrap.tabs)
DEMO http://plnkr.co/edit / mLBkDwEVY6SIh5oCyy0K?p = preVIEW
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
您 $观看
不起作用!如果你把的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
这篇关于角UI分页引导里面没有ui.bootstrap.tabs工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!