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"
}