Angular UI 引导程序分页在 ui.bootstrap.tabs 中不起作用 [英] Angular UI bootstrap pagination not working inside ui.bootstrap.tabs
本文介绍了Angular UI 引导程序分页在 ui.bootstrap.tabs 中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Angular UI 引导程序提供了很棒的解决方案.很遗憾分页(ui.bootstrap.pagination)在标签(ui.bootstrap.tabs)
中不起作用演示 http://plnkr.co/edit/mLBkDwEVY6SIh5oCyy0K?p=预览
angular.module('mytodos', ['ui.bootstrap']).controller('TodoController', function($scope) {$scope.filteredTodos = [];$scope.currentPage = 1;$scope.numPerPage = 10;$scope.maxSize = 5;$scope.todos = [{身份证":1，"date": "12-Jan-2015",支票号码":11111，撤回":126.01，存款":236.00，余额":953.00}, {身份证":2，"date": "22-February-2015",支票号码":222222，撤回":126.01，存款":236.00，余额":953.00}, {身份证":3，"date": "14-March-2015",支票号码":33333，撤回":126.01，存款":236.00，余额":953.00}, {身份证":4，"date": "16-April-2015",支票号码":44444，撤回":126.01，存款":236.00，余额":953.00}, {身份证":5，"date": "30-May-2015",支票号码":55555，撤回":126.01，存款":236.00，余额":953.00}, {身份证":6，"date": "22-February-2015",支票号码":222222，撤回":126.01，存款":236.00，余额":953.00}, {身份证":7，"date": "14-March-2015",支票号码":33333，撤回":126.01，存款":236.00，余额":953.00}, {身份证":8，"date": "16-April-2015",支票号码":44444，撤回":126.01，存款":236.00，余额":953.00}, {身份证":9，"date": "30-May-2015",支票号码":55555，撤回":126.01，存款":236.00，余额":953.00}, {身份证":10，"date": "22-February-2015",支票号码":222222，撤回":126.01，存款":236.00，余额":953.00}, {身份证":11，"date": "14-March-2015",支票号码":33333，撤回":126.01，存款":236.00，余额":953.00}, {身份证":12，"date": "16-April-2015",支票号码":44444，撤回":126.01，存款":236.00，余额":953.00}, {身份证":13，"date": "30-May-2015",支票号码":55555，撤回":126.01，存款":236.00，余额":953.00}, {身份证":14，"date": "22-February-2015",支票号码":222222，撤回":126.01，存款":236.00，余额":953.00}, {身份证":15，"date": "14-March-2015",支票号码":33333，撤回":126.01，存款":236.00，余额":953.00}, {身份证":16，"date": "16-April-2015",支票号码":44444，撤回":126.01，存款":236.00，余额":953.00}, {身份证":17，"date": "30-May-2015",支票号码":55555，撤回":126.01，存款":236.00，余额":953.00}, {身份证":18，"date": "22-February-2015",支票号码":222222，撤回":126.01，存款":236.00，余额":953.00}, {身份证":19，"date": "14-March-2015",支票号码":33333，撤回":126.01，存款":236.00，余额":953.00}, {身份证":20，"date": "16-April-2015",支票号码":44444，撤回":126.01，存款":236.00，余额":953.00}, {身份证":21，"date": "30-May-2015",支票号码":55555，撤回":126.01，存款":236.00，余额":953.00}, {身份证":22，"date": "22-February-2015",支票号码":222222，撤回":126.01，存款":236.00，余额":953.00}, {身份证":23，"date": "14-March-2015",支票号码":33333，撤回":126.01，存款":236.00，余额":953.00}, {身份证":24，"date": "16-April-2015",支票号码":44444，撤回":126.01，存款":236.00，余额":953.00}, {身份证":25，"date": "30-May-2015",支票号码":55555，撤回":126.01，存款":236.00，余额":953.00}, {身份证":26，"date": "30-May-2015",支票号码":55555，撤回":126.01，存款":236.00，余额":953.00}, {身份证":27，"date": "22-February-2015",支票号码":222222，撤回":126.01，存款":236.00，余额":953.00}, {身份证":28，"date": "14-March-2015",支票号码":33333，撤回":126.01，存款":236.00，余额":953.00}, {身份证":29，"date": "16-April-2015",支票号码":44444，撤回":126.01，存款":236.00，余额":953.00}, {身份证":30，"date": "30-May-2015",支票号码":55555，撤回":126.01，存款":236.00，余额":953.00}, {身份证":31，"date": "30-May-2015",支票号码":55555，撤回":126.01，存款":236.00，余额":953.00}, {身份证":32，"date": "22-February-2015",支票号码":222222，撤回":126.01，存款":236.00，余额":953.00}, {身份证":33，"date": "14-March-2015",支票号码":33333，撤回":126.01，存款":236.00，余额":953.00}, {身份证":34，"date": "16-April-2015",支票号码":44444，撤回":126.01，存款":236.00，余额":953.00}, {身份证":35，"date": "30-May-2015",支票号码":55555，撤回":126.01，存款":236.00，余额":953.00}, {身份证":36，"date": "30-May-2015",支票号码":55555，撤回":126.01，存款":236.00，余额":953.00}, {身份证":37，"date": "22-February-2015",支票号码":222222，撤回":126.01，存款":236.00，余额":953.00}, {身份证":38，"date": "14-March-2015",支票号码":33333，撤回":126.01，存款":236.00，余额":953.00}, {身份证":39，"date": "16-April-2015",支票号码":44444，撤回":126.01，存款":236.00，余额":953.00}, {身份证":40，"date": "30-May-2015",支票号码":55555，撤回":126.01，存款":236.00，余额":953.00}];$scope.$watch('currentPage + numPerPage', function() {var begin = (($scope.currentPage - 1) * $scope.numPerPage),结束 = 开始 + $scope.numPerPage;$scope.filteredTodos = $scope.todos.slice(begin, end);});});.box {边框:1px 实心 #DDD；填充:10px；位置:相对；背景:#FFF；边距:0 0 10px；}.tab-content >.tab 窗格 >.盒子 {边框顶部:无；}.tab-content >.盒子 {边框顶部:无；}<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="样式表"/><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="容器"><标签集><标签><tab-heading>声明</tab-heading><div class="box"><h1>待办事项</h1><h4>{{todos.length}} 总计</h4><ul><li ng-repeat="todo in filtersTodos">{{todo.id}} 索引:{{$index}}</li><分页 ng-model="currentPage" total-items="todos.length" max-size="maxSize" boundary-links="true"></分页></tab></tabset>
解决方案
您的 $watch 不起作用！如果你把 console.log($scope.currentPage) 放在你的 $watch 函数中，你会看到，当页面改变时不会有输出.
我建议在分页元素上使用 ng-change 并在作用域上定义一个函数(而不是 $watch)！
@see http://angular-ui.github.io/bootstrap/#/分页
要确保更新 currentPage 模型，您可以设置一个对象而不仅仅是一个整数(作用域继承的关键！)
//JS$scope.pagination = { currentPage: 1 };//HTML<分页ng-model="pagination.currentPage">我推荐阅读这篇文章:https://github.com/angular/angular.js/wiki/Understanding-Scopes
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 $watchdoesn'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
这篇关于Angular UI 引导程序分页在 ui.bootstrap.tabs 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
