利用angularjs进行分页

来源：互联网发布：java 不同类传参编辑：程序博客网时间：2024/04/19 08:35

一、首先定义一个service

.factory("showUser",function ($http) {               return{                   userListByPage:function (page) {                       return $http({                           method:"GET",                           url:"/webapp/user/userlistByPage",                           params:{                               "page":page,//当前页数                               "num":5  //每页显示数据条数                           }                       })                   }               }           })

二、定义一个指令来监测页数变化时显示的数据

.directive("watchChange",function (showUser) {                return{                    restrict:"A",                    controller:function ($scope,showUser) {                        $scope.$watch("page",function (newPage) {                            showUser.userListByPage(newPage).success(function (response) {                                $scope.getUserListByPage = response.data;                            })                        })                    }                }            })

三、利用ng-repeat显示数据

  <table>       <tr ng-repeat="user in getUserListByPage">           <td>{{user.id}}</td>           <td>{{user.username}}</td>           <td>{{user.password}}</td>           <td>{{user.type}}</td>       </tr>   </table>

四、利用ng-click改变ng-model里面的page

    <a href="" ng-click="page=page+1" ng-model="page" watch-change ng-init="page=1">下一页</a>    <a href="" ng-click="page=page-1" watch-change>上一页</a>

完整代码：https://git.oschina.net/luffy0304/angularjs.git

0 0