Web front-end —— check box, select all, reverse selection, and pagination small examples in the angular1 table

html page code:

<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 code:

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

Page effect: