I have this code http://plnkr.co/edit/thSwsookMIY6LZMftVhY?p=preview. I just tried put a pagination module of ui-bootstrap in a tab. My problem is that currentPage changes in the scope, but doesn't refresh the items that is showing.
Controller List.js
controllers.controller('List', function ($scope) {
$scope.itemsPerPage = 5;
$scope.currentPage = 1;
$scope.totalAds = 0;
$scope.pageCount = function () {
return Math.ceil($scope.totalAds / $scope.itemsPerPage);
};
$scope.tabs = [
{ "category": "G", "active": true, "ads": [{ "title": "Tit 1 G", "content": "Content ad 1 g" }, { "title": "Tit 2 G", "content": "Content ad 2 g" }, { "title": "Tit 3 G", "content": "Content ad 3 g" }, { "title": "Tit 4 G", "content": "Content ad 4 g" }, { "title": "Tit 5 G", "content": "Content ad 5 g" }, { "title": "Tit 6 G", "content": "Content ad 6 g" }, { "title": "Tit 7 G", "content": "Content ad 7 g" }, { "title": "Tit 8 G", "content": "Content ad 8 g" }, { "title": "Tit 9 G", "content": "Content ad 9 g" }, { "title": "Tit 10 G", "content": "Content ad 10 g" }, { "title": "Tit 11 G", "content": "Content ad 11 g" }, { "title": "Tit 12 G", "content": "Content ad 12 g" }, { "title": "Tit 13 G", "content": "Content ad 13 g" }, { "title": "Tit 14 G", "content": "Content ad 14 g" }, { "title": "Tit 15 G", "content": "Content ad 15 g" }, { "title": "Tit 16 G", "content": "Content ad 16 g" }, { "title": "Tit 17 G", "content": "Content ad 17 g" }] },
{ "category": "C", "active": false, "ads": [{ "title": "Tit 1 C", "content": "Content ad 1 c" }, { "title": "Tit 2 C", "content": "Content ad 2 c" }, { "title": "Tit 3 C", "content": "Content ad 3 c" }] },
{ "category": "T", "active": false, "ads": [{ "title": "Tit 1 T", "content": "Content ad 1 t" }, { "title": "Tit 2 T", "content": "Content ad 2 t" }, { "title": "Tit 3 T", "content": "Content ad 3 t" }, { "title": "Tit 4 T", "content": "Content ad 4 t" }, { "title": "Tit 5 T", "content": "Content ad 5 t" }, { "title": "Tit 6 T", "content": "Content ad 6 t" }, { "title": "Tit 5 T", "content": "Content ad 5 t" }, { "title": "Tit 7 T", "content": "Content ad 7 t" }, { "title": "Tit 8 T", "content": "Content ad 8 t" }, { "title": "Tit 9 T", "content": "Content ad 9 t" }, { "title": "Tit 10 T", "content": "Content ad 10 t" }, { "title": "Tit 11 T", "content": "Content ad 11 t" }, { "title": "Tit 12 T", "content": "Content ad 12 t" }, { "title": "Tit 13 T", "content": "Content ad 13 t" }, { "title": "Tit 14 T", "content": "Content ad 14 t" }, { "title": "Tit 15 T", "content": "Content ad 15 t" }, { "title": "Tit 16 T", "content": "Content ad 16 t" }, { "title": "Tit 17 T", "content": "Content ad 17 t" }, { "title": "Tit 18 T", "content": "Content ad 18 t" }, { "title": "Tit 19 T", "content": "Content ad 19 t" }] },
{ "category": "A", "active": false, "ads": [{ "title": "Tit 1 A", "content": "Content ad 1 a" }, { "title": "Tit 2 A", "content": "Content ad 2 a" }] }
];
$scope.getTotal = function () {
$scope.totalAds = 0;
angular.forEach($scope.tabs, function (tab) {
if (tab.active) {
$scope.totalAds = tab.ads.length;
}
});
};
$scope.selectedAds = function (category) {
var ads = [];
angular.forEach($scope.tabs, function (tab) {
if (tab.category == category) {
ads = tab.ads;
}
});
return ads;
};
$scope.pageChanged = function () {
console.log('Page changed to: ' + $scope.currentPage);
};
$scope.category = function () {
return $scope.tabs.filter(function (tab) {
return tab.active;
})[0].category;
};
$scope.$watch('category()', function () {
$scope.currentPage = 1;
$scope.getTotal();
var end = $scope.currentPage + $scope.itemsPerPage;
$scope.filteredAds = $scope.selectedAds($scope.category()).slice(0, end);
});
$scope.$watch('currentPage', function () {
var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
end = begin + $scope.itemsPerPage;
$scope.filteredAds = $scope.selectedAds($scope.category()).slice(begin, end);
});
$scope.getTotal();
});
index.html
<!DOCTYPE html>
<html ng-app="app">
<head lang="es">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Adiminstración del tablón de anuncios</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="List.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
</head>
<body ng-controller="List">
<tabset>
<tab ng-repeat="tab in tabs" heading="{{tab.category}}" active="tab.active">
<ul>
<li ng-repeat="ad in filteredAds">
<section>
<h3 ng-bind="ad.title"></h3>
<p ng-bind="ad.content"></p>
</section>
</li>
</ul>
<pagination total-items="totalAds" items-per-page="itemsPerPage" ng-model="currentPage"></pagination>
<p>
Total items: {{totalAds}}<br />
Items per page: {{itemsPerPage}}<br />
Current Page: {{currentPage}}
</p>
</tab>
</tabset>
</body>
</html>
I've tried the solution that been posted here (How do I tell ui-Bootstrap what content to paginate?) but it doesn't work for me. The value currentPage refresh in the page but the $watch doesn't fired.
