Question

我正在使用JavaScript框架＆＃34; AngularJS＆＃34;开发Web应用程序。我尝试从＆＃34; youTube＆＃34;的教程中学习它。实际上，我尝试显示每页的用户列表，即：第1页包含10个用户。所以我们将在这样的网页上加以分页（我不知道怎么做）。

- 编码到AngularJS：

    app.controller("UsersController",function($scope,$http)
            {
    $scope.ListUsers=[];
    $scope.pageNow=0;
    $scope.message = "";


    $scope.AllUsers=function()
    {
        $http.get("http://localhost:8080/ListUsers/"+$scope.pageNow)
        .success(function(data){
            $scope.ListUsers=data;    
            $scope.pages=new Array(data.totalpages);
        }).error(function(err){
            console.log("error:" +err);
        }); 
    };

    $scope.AllUsers();

 //Navigation between pages
   $scope.gotoPage=function(p)
   {
   $scope.pageNow=p;
   if ($scope.motCle == null){ 
        $scope.AllUsers();
     } else { 

      $scope.AllUsers();
     }
   };

};

代码HTML：

<div ng-repeat="user in ListUsers">
Name:{{user.Name}}
Email:{{user.Email}}    </div>

//here pagination    
<ul><li ng-class="{active:$index==pageNow}" class="clickable"
      ng-repeat="p in pages track by $index">
      <a ng-click="gotoPage($index)">{{$index}}</a></li>
</ul>

- 我的结果是所有的信息都很好地显示和分页，如下所示：0-1-2-3-4-5

然后我尝试通过添加＆＃34; previous＆＃34;的导航来限制页面数量的显示。和＆＃34; next＆＃34; （＆lt;＆lt; 1-2-3＆gt;＆gt;）

谢谢，

Answer 1

我发现最简单的方法是使用ui-bootstrap。

这是我在谷歌上发现的plnkr，显示了如何设置它。

如何在AngularJS中进行分页？

1 个答案: