列表的全选反选

最新推荐文章于 2024-04-02 19:39:43 发布

Mq_Zhang01

最新推荐文章于 2024-04-02 19:39:43 发布

阅读量544

点赞数 1

分类专栏： angular的应用文章标签：全选反选删除

本文链接：https://blog.csdn.net/Zmq321834649/article/details/78326935

版权

angular的应用专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    //这里的angular包  自己引入
    <style>
        button{
            border-radius: 8px;
            margin-left: 320px;
            border: 1px solid #555555;
            background: #555555;
            color: white;
        }
        table{
            border: 1px solid #555555;
            width: 400px;
        }
    </style>
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.controller("myCtrl",function ($scope) {
            $scope.data=[
                {
                    id:"1",
                    name:"张三",
                    age:"24",
                    sex:"男",
                    check:false
                },{
                    id:"2",
                    name:"李四",
                    age:"27",
                    sex:"女",
                    check:false
                },{
                    id:"3",
                    name:"王妹妹",
                    age:"18",
                    sex:"女",
                    check:false
                },{
                    id:"4",
                    name:"赵六",
                    age:"60",
                    sex:"男",
                    check:false
                }
            ];

            //删除数据
            $scope.del=function () {
                var num=0;
                for(var i=0;i<$scope.data.length;i++){
                    if($scope.data[i].check==false){
                        num++;
                    }
                }
                if(num==$scope.data.length){
                    alert("请勾选数据");
                }else{
                    for(var i=0;i<$scope.data.length;i++){
                        if($scope.data[i].check==true){
                            $scope.data.splice(i,1);
                            i--;
                        }
                    }
                };
            };

            //全选
            $scope.checkAll=false;
            $scope.check2=function () {
                if($scope.checkAll==true){
                    for(var i=0;i<$scope.data.length;i++){
                        $scope.data[i].check=true;
                    }
                }else{
                    for(var i=0;i<$scope.data.length;i++){
                        $scope.data[i].check=false;
                    }
                }
            }
            //反选
            var n=0;
            $scope.count=function(index) {

                if($scope.data[index].check==true){
                    n++;
                }else{
                    n--;
                }
                if(n==$scope.data.length){
                    $scope.checkAll=true;
                }else{
                    $scope.checkAll=false;
                }

            };
        });
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<button ng-click="del()">删除选中项</button>
<table cellspacing="0" cellpadding="10" border="1">
    <thead>
    <tr>
        <th><input type="checkbox" ng-model="checkAll" ng-click="check2()">全选</th>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    </thead>
    <tbody>
    <tr  ng-repeat="item in data">
        <td><input type="checkbox" ng-model="item.check" ng-click="count($index)"></td>
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <td>{{item.sex}}</td>
    </tr>
    </tbody>
</table>
</body>
</html>