如何通过 AngularJS 进行分页？答案

【问题标题】：How can i make pagination through AngularJS?如何通过 AngularJS 进行分页？
【发布时间】：2015-03-10 23:21:39
【问题描述】：

最近我创建了一个 AngularJs App 。代码如下

HTML：

      <div ng-app="" ng-controller="Hello">
            <ul>
                <li ng-repeat="x in greeting">
                    {{ x.user_name }}
                </li>
            </ul>
        </div>

而我的 JS 代码是：

function Hello($scope, $http) {
$http.get('http://localhost/google/cibl/dashboard/get_all_user').
    success(function(data) {
        $scope.greeting = data;
    });

}

它工作正常。这个 http 服务给了我 2000 行，现在我想用 AngularJs 来分页。我该怎么做？

【问题讨论】：

这里可能已经有一个答案：stackoverflow.com/questions/10816073/…

标签： html angularjs http pagination

【解决方案1】：

你可以这样做：

Pagination Example: http://jsfiddle.net/2ZzZB/56/

在这个问题中找到它：

Pagination on a list using ng-repeat

【讨论】：

【解决方案2】：

在你的控制器中

    app.controller('Hello', function($scope){
        $scope.pageSize = 10;
        $scope.currentPage = 0;

        $scope.changePage = function(page){
            $scope.currentPage = page;
        }
    })

在你的标记中，你应该有

    <div ng-app="" ng-controller="Hello">
        <ul>
            <li ng-repeat="x in greeting | startFrom: currentPage * pageSize | limitTo: pageSize">
                {{ x.user_name }}
            </li>
        </ul>
    </div>

我们缺少 startFrom 过滤器，所以让我们创建它

    app.filter('startFrom', function() {
        return function(input, start) {
            start = +start; //parse to int
            return input.slice(start);
        }
    });

现在剩下的就是分页面板了，我会留给你用 css 来美化它

    <ul class="pagination" >
        <li ng-repeat="page in pagination" ng-class="{'active':currentPage == page}"><a ng-click="changePage(page)">{{page + 1}}</a></li>
    </ul>

注意事项：

我们之所以使用 changePage() 而不是 currentPage = page 是因为 ng-repeat 可能会破坏一些变量
在您的锚 () 标记中，您可以使用 href 来标记页面，而不是 ng-click，并在控制器中查看页面引用并根据查询进行更改。这样做的好处是，当您决定为您的网站进行 SEO 时，它就会为此做好准备！

href="#!/partialname?page={{page}}"

【讨论】：

其实我是 angularJS 的新手，我不明白如何放置这些代码。我的 JS 文件应该看起来像这样吗My JS File
我为您编写的应用程序控制器中的所有内容都可以进入您的 Hello 函数。这些是声明控制器的同义词。
@YangLi 我们可以将 dir-pagination 指令用于任何标记，如 div 或任何其他自定义指令吗？

【解决方案3】：

至少我得到了一个解决方案并且它可以正常工作：

HTML：

<div ng-controller="userController" class="jumbotron">
        <h2>User List</h2> 

        <table  class="table table-striped">
            <thead>
                <tr>
                    <th>User </th>
                    <th>Group</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr dir-paginate="u in users | itemsPerPage : 5">
                    <td>{{u.user_name}}</td>
                    <td>{{u.user_type}}</td>

                </tr>                         
            </tbody>
        </table>                
        <dir-pagination-controls on-page-change="pageChanged(current)" template-url="<?php echo base_url(); ?>js/dirPagination.tpl.html"></dir-pagination-controls>
    </div>

和 JS ：这里我使用 AngularJs 分页指令

function userController($scope, $http) {
    $scope.users = [];
    $scope.total = 0;
    $scope.perPage = 25; // this should match however many results your API puts on one page
    getUsers(1);

    $scope.pagination = {
        current: 1
    };

    $scope.pageChanged = function (newPage) {
        getUsers(newPage);
    };

    function getUsers(pageNumber) {
            // this is just an example, in reality this stuff should be in a service
            $http.get(app.baseUrl + 'dashboard/get_all_user/' + pageNumber)
                    .success(function (data) {
                        console.log(data);
                        $scope.users = data.users;
                        $scope.total = data.total;
            })
            .error(function (data) {
                console.log(data);
                alert("There was a problem. Please try again later.");
            });
        }
};
var myApp = angular.module('myApp', ['angularUtils.directives.dirPagination']);
var app = app || {};
app.baseUrl = '<?= base_url() ?>';
myApp.controller('userController', userController);

【讨论】：