html - 我怎样才能通过 AngularJS 进行分页？

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

在你的 Controller 中

    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>

注意事项:

1. 我们使用 changePage() 而不是 currentPage = page 的原因是因为 ng-repeat 可能会破坏一些变量

2. 在您的 anchor () 标记中，您可以使用 href 来标记页面，而不是 ng-click，并在您的 Controller 中，观察页面 ref 并根据查询进行更改。这样做的好处是，当您决定为您的网站进行 SEO 时，它会为此做好准备!

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