我正在使用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,显示了如何设置它。