web前端————angular1表格中的复选框、全选、反选、分页小例子

html页面代码：

      

        

          

            全选
          
          
姓名
          
年龄
        
      
      

        

          

            
          
          

            
{{item.name}}
          
          

            
{{item.id}}
          
        
      
    

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

页面效果：