html页面代码：
<table class="table ordertable label-table">
<thead>
<tr>
<th style="width:10%;">
<input type="checkbox" ng-checked="selectAllButton()" ng-click="clickSelectAll($event)">全选
</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(index,item) in list">
<td>
<input type="checkbox" ng-checked="itemChecked(item)" ng-click="itemCheckedClick(item)">
</td>
<td>
<p>{{item.name}}</p>
</td>
<td>
<p>{{item.id}}</p>
</td>
</tr>
</tbody>
</table>
JS代码：
var app = angular.module('app',[])
app.controller('myController',function($scope) {
$scope.list = []
$scope.testData = [//模拟后台数据
{ id:1,name:"小一"},{ id:2,name:"小二"},{ id:3,name:"小三"},{ id:4,name:"小四"},
{ id:5,name:"小五"},{ id:6,name:"小六"},{ id:7,name:"小七"},{ id:8,name:"小八"},{ id:9,name:"小九"},
{ id:10,name:"小十"},{id:11,name:"小十一"},{ id:12,name:"小十二"},{ id:13,name:"小十三"},{ id:14,name:"小十四"},{ id:15,name:"小十五"},
{ id:16,name:"小十六"},{ id:17,name:"小十七"},{ id:18,name:"小十八"},{ id:19,name:"小十九"},{ id:20,name:"小二十"},
]
$scope.page = 0//页面编码
$scope.selectArrray = [] //定义第三方变量，存储选中的数据
/**
* 获取后台数据
* 实际项目中方法里写的是ajax
*/
$scope.getData = function(page){
var num = 0
num = page === 0 ? 1 : page+1
//$scope.testData.slice(page*5,num*5) 相当于从后台获取的数据，这里每页取五条
$scope.list = $scope.testData.slice(page*5,num*5)
}
$scope.getData($scope.page)
/**
* 全选按钮点击
*/
$scope.clickSelectAll = function($event) {
var checked = $event.target
if(checked.checked) {
$scope.list.forEach(item=>{
if($scope.selectArrray.indexOf(item) === -1) {
$scope.selectArrray.push(item)
}
})
}else {
$scope.list.forEach(item=>{
$scope.selectArrray.splice($scope.selectArrray.indexOf(item),1)
})
}
}
/**
* 全选按钮状态
*/
$scope.selectAllButton = function() {
var isAll = true
$scope.list.forEach(item=>{
if($scope.selectArrray.indexOf(item) === -1) {
isAll = false
}
})
return isAll
}
/**
* 单选按钮点击
*/
$scope.itemCheckedClick = function(item) {
if($scope.selectArrray.indexOf(item) === -1) {
$scope.selectArrray.push(item)
}else {
$scope.selectArrray.splice($scope.selectArrray.indexOf(item),1)
}
}
/**
* 单选按钮选中状态
*/
$scope.itemChecked = function(item) {
return $scope.selectArrray.indexOf(item) !== -1
}
$scope.next = function() { //模拟下一页
$scope.page = $scope.page+1
$scope.getData($scope.page)
}
$scope.prod = function() { //模拟上一页
$scope.page = $scope.page-1
$scope.getData($scope.page)
}
/**
* 确定按钮
*/
$scope.isOk = function() {
console.log($scope.selectArrray)
}
})
页面效果：
