基于Angularjs的跨分页勾选（后台分页）

head部分，style样式

ul {
            overflow: hidden;
            margin: 0;
        }
        ul li {
            list-style: none;
            float: left;
            border: 1px solid orange;
            text-align: center;
            width: 13%;
        }
        .page li{cursor: pointer;border: none;}
        .page li a{
            padding: 0 30px;
            display: block;
            border: 1px solid red;
        }

body部分内容

<div ng-controller="demoCtrl">
            <div id="box">
                <ul style="background: lightgreen;">
                    <li title="全选" class="check" style="width: 5%;"><input type="checkbox" id="checkScope" ng-click="checkScope()" /></li>
                    <li style="width: 5%;">序号</li>
                    <li>手机号</li>
                    <li>姓名</li>
                </ul>
                <ul class="td" ng-repeat="item in data">
                    <li class="check" style="width: 5%;"><input type="checkbox" class="checkscope" ng-click="checkscope(item)" value="{{item}}"ng-checked = "item.checked"/></li>
                    <li style="width: 5%;">{{$index+1}}</li>
                    <li>{{item.phone}}</li>
                    <li>{{item.realname}}</li>
                    <li>
                        <a javascript:void(0) class="button operate" ng-click="detail(item)" style="line-height: 0;">修改</a>
                    </li>
                </ul>
            </div>
            <div class="adUser-footer"style="margin-top: 20px;">
                    <ul class="page clear">
                        <li><a ng-click="firstPage()">首页</a></li>
                        <li><a ng-click="previous()">上一页</a></li>
                        <li>第{{page.pageNum}}页</li>
                        <li><a ng-click="next()">下一页</a></li>
                        <li><a ng-click="lastPage()">尾页</a></li>
                        <li><span>跳转到第 </span><input type="text" ng-model="thistopage"id="runpage"style="width: 20px;"/> 页</li>
                        <li>共{{page.pages}}页</li>
                    </ul>
            </div>            

        </div>
        <script src="js/angular.min.js"></script>

JS部分

  

 var demoApp = angular.module('demoApp', []);
    demoApp.controller('demoCtrl', ['$scope', '$http', function($scope, $http) {
        $scope.BaseUrl = "http://192.168.3.114:8010/wave3g"
        $scope.dataUrl = $scope.BaseUrl + '/waveUser/selectAll';
        $scope.waveid = 1
        $scope.nodata = [];

        function init() {
            var params = {
                waveid: $scope.waveid,
                pageNum: 1,
                pageSize: 10
            }
            var Url = $scope.BaseUrl+ "/waveUser/selectAll";
            getdata(params, Url);
        }
        init()

        function getdata(params, Url) {
            $http({
                url: Url,
                method: "POST",
                params: params
            }).success(function(data) {
                $scope.page = data.result;
                $scope.data = data.result.list;
                angular.forEach($scope.data,function(value){
                    value.checked = false;
                })
                getId($scope.data);        
                checkAll($scope.data)
                //判断当前页被选中的数目，确定是否要全选按钮
            })
        }
        /*--全选事件--*/
        $scope.checkScope = function() {
            var check = $('#checkScope').prop('checked');
            if(check == true) {
                angular.forEach($scope.data,function(value){
                    value.checked = true;
                })
            } else {
                angular.forEach($scope.data,function(value){
                    value.checked = false;
                    updateAllKeep()
                })
            }
        }
        $scope.checkscope = function(item) {
            item.checked=!item.checked;
            if(item.checked==false){
                updateKeep(item);
            }
            //当选中的长度等于checkbox的长度的时候,就让控制全选反选的checkbox设置为选中,否则就为未选中
            if($(".checkscope:checkbox").length == $(".checkscope:checked").length) {
                $("#checkScope").prop("checked", true);
            } else {
                $("#checkScope").prop("checked", false);
            }
        }
        function keepId (){
            var sessionId = sessionStorage.getItem("sessionId");
                if(!sessionId){sessionId=[]}else{
                    sessionId = JSON.parse(sessionId);
                }
            angular.forEach($scope.data,function(data){
                if(data.checked==true){
                    //防止重复添加
                    var count=0;
                    angular.forEach(sessionId,function(value){
                        if(value.id==data.id){
                            count++
                        }else{
                            return false
                        }
                    })
                    if(count==0){
                        sessionId.push({"id":data.id})
                    }
                }
            })
            sessionId = JSON.stringify(sessionId)
            sessionStorage.setItem("sessionId",sessionId);
        }
        //取消选择事件
        function updateKeep(item){
            var getSessionId = sessionStorage.getItem("sessionId");
                getSessionId = JSON.parse(getSessionId);
            angular.forEach(getSessionId,function(value,$index){
                if(item.id==value.id){
                    getSessionId.splice($index,1)
                }
            })
            getSessionId = JSON.stringify(getSessionId);
            sessionStorage.setItem("sessionId",getSessionId)
        }
        //取消全选事件
        function updateAllKeep(){
            var getSessionId = sessionStorage.getItem("sessionId");
                getSessionId = JSON.parse(getSessionId);
                angular.forEach($scope.data,function(data){
                    angular.forEach(getSessionId,function(value,$index){
                    if(data.id==value.id){
                        getSessionId.splice($index,1)
                        }
                    })
                })
            getSessionId = JSON.stringify(getSessionId);
            sessionStorage.setItem("sessionId",getSessionId)
        }
        function updateKeep(item){
            var getSessionId = sessionStorage.getItem("sessionId");
                getSessionId = JSON.parse(getSessionId);
            angular.forEach(getSessionId,function(value,$index){
                if(item.id==value.id){
                    getSessionId.splice($index,1)
                }
            })
            getSessionId = JSON.stringify(getSessionId);
            sessionStorage.setItem("sessionId",getSessionId)
        }
        //获取session存储
        function getId (item){
            var getSessionId = sessionStorage.getItem("sessionId");
                getSessionId = JSON.parse(getSessionId);
            angular.forEach(getSessionId,function(value){
                angular.forEach(item,function(data){
                    if(data.id == value.id){
                        data.checked = true;
                    }
                })
            })
            return item;
        }
        //确定全选事件是否存在
        function checkAll(item){
            var count=0;
            angular.forEach(item,function(value){
                if(value.checked==true){
                    count++;
                }
            })
            if($scope.data.length==count){
                $("#checkScope").prop("checked", true);
            }else{
                $("#checkScope").prop("checked", false);
            }
                
        }

最后在分页部分引入 keepId();

例如：$scope.firstPage = function() {
            keepId();
            init();
        }

附：json内容

{
  "result": {
    "pageNum": 1,
    "pageSize": 10,
    "size": 10,
    "startRow": 1,
    "endRow": 10,
    "total": 29,
    "pages": 3,
    "list": [
      {
        "id": 85,
        "phone": "13301",
        "realname": "刘一"
      },
     {
        "id": 85,
        "phone": "13302",
        "realname": ".刘二"
      }
    ],
    "prePage": 0,
    "nextPage": 2,
    "isFirstPage": true,
    "isLastPage": false,
    "hasPreviousPage": false,
    "hasNextPage": true,
    "navigatePages": 8,
    "navigatepageNums": [
      1,
      2,
      3
    ],
    "navigateFirstPage": 1,
    "navigateLastPage": 3,
    "firstPage": 1,
    "lastPage": 3
  },
  "message": "success",
  "status": "1"
}