javascript

AngularJS（4）分页

数据请求过多，导致加载很慢，就需要进行分页。
第几页page，每页多少条count，共几页totalPages。
page = n;
start = (n-1)*count;
totalPages = Math.ceil(tatalCount/count);

根据上述公式，结合豆瓣API源代码如下

  • js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    (function(angular) {
        'use strict';
        /*定义模块*/
        var module = angular.module('moviecat.movie_list', ['ngRoute', 'moviecat.services.http']);
        /*定义路由*/
        module.config(['$routeProvider', function($routeProvider) {
            $routeProvider.when('/:category/:page', {
                templateUrl: 'movie_list/view.html',
                controller: 'MovieListController'
            });
        }]);
        /*定义控制器*/
        module.controller('MovieListController', [
            '$scope',
            '$http',
            '$route',
            '$routeParams',
            'HttpService',
            function($scope, $http, $route, $routeParams, HttpService) {
                var count = 6;
                var page = parseInt($routeParams.page);
                var start = (page - 1) * count;
                /*model*/
                $scope.loading = true;
                $scope.message = "";
                $scope.datalist = [];
                $scope.title = "";
                $scope.totalCount = 0;
                $scope.totalPages = 0;
                $scope.currentPage = page;
                
                HttpService.jsonp('http://api.douban.com/v2/movie/' + $routeParams.category, { start: start, count: count }, function(data) {
                    console.log(data);
                    $scope.loading = false;
                    $scope.title = data.title;
                    $scope.datalist = data.subjects;
                    $scope.totalCount = data.total;
                    $scope.totalPages = Math.ceil(data.total/count);
                    $scope.$apply();
                    console.log(data.subjects);
                });
                /*function*/
                $scope.go = function(page) {
                    if (page > 0 && page <= $scope.totalPages) {
                        $route.updateParams({ page: page });
                    }
                };
            }
        ]);
    })(angular);

  • html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div ng-show="!loading">
        <p>总共：{{totalPages}}页，第{{currentPage}}/{{totalPages}}页</p>
        <nav>
            <ul class="pager">
                <li ng-class="{disabled:currentPage < 2}"><a href="javascript:" ng-click="go(currentPage-1)">上一页</a></li>
                <li ng-class="{disabled:currentPage >= totalPages}"><a href="javascript:" ng-click="go(currentPage+1)">下一页</a></li>
            </ul>
        </nav>
    </div>

Note

  • 路由通过 :变量名称 传递变化数据

    1
    2
    3
    4
    5
    6
    module.config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/:category/:page', {
            templateUrl: 'movie_list/view.html',
            controller: 'MovieListController'
        });
    }]);

  • 通过 $routeParams.变量名称 获取路由变量值

    1
    var page = parseInt($routeParams.page);

  • 豆瓣API地址