Question

我有这段代码http://plnkr.co/edit/thSwsookMIY6LZMftVhY?p=preview。我刚试过把一个ui-bootstrap的分页模块放在一个标签中。我的问题是currentPage在范围内发生了变化，但是没有刷新正在显示的项目。

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>

我已经尝试过这里发布的解决方案（How do I tell ui-Bootstrap what content to paginate?），但它对我不起作用。值currentPage在页面中刷新但$ watch没有被触发。

Answer 1

我面临同样的问题，并通过代码中的微小变化解决了这个问题。这是因为tabset使用自己的控制器，分页的父控制器成为tabset的控制器。

在你的控制器中添加：

$scope.data = {};

在模板更改模型中：

<pagination ng-model='data.currentPage'></pagination>

分页不适用于选项卡内的angular-ui-bootstrap

1 个答案: