如何在AngularJS中进行分页



我正在使用JavaScript框架"AngularJS"开发一个Web应用程序。我试图从"youTube"的教程中学习它。事实上,我尝试显示每页的用户列表,即:第 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

然后,我尝试通过添加"上一个"和"下一个"的导航来限制页面编号的显示(<<1-2-3>>(

谢谢

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

这是我在谷歌上找到的一个plnkr,显示了如何设置它。

相关内容

  • 没有找到相关文章

最新更新