Question

最近我创建了一个AngularJs应用程序。那些代码在

之下

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对此进行分页。我怎么能这样做？

Answer 1

在您的控制器中

    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可能会破坏某些变量

在您的anchor（）标记中，您可以使用href标记页面，而不是ng-click，在控制器中查看页面引用并根据查询进行更改。这样做的好处是，当你决定为你的网站做SEO时，它就会为此做好准备！

HREF =＆＃34;！？＃/ partialname页= {{页}}＆＃34;

Answer 2

你可以这样做：

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

在这个问题中找到它：

Pagination on a list using ng-repeat

Answer 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);

我如何通过AngularJS进行分页？

3 个答案: