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 = 0num = 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.targetif(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)}})