angularJS全选/批量删除

最新推荐文章于 2024-07-31 10:36:43 发布

By_Weicy

最新推荐文章于 2024-07-31 10:36:43 发布

阅读量1.8k

点赞数 1

文章标签： angularjs

本文链接：https://blog.csdn.net/weikai_/article/details/78295933

版权

安卓基础/混合开发专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>批量删除</title>
    <script src="全选/angular.min.js"></script>
    <script>
        var app = angular.module("myApp",[]);
        //$scope.aa = dd;
        app.controller("myCtrl",function ($scope) {
            $scope.arr = [{
                key:"1",
                value:"这是第一项"
            },{
                key:"2",
                value:"这是第二项"
            },{
                key:"3",
                value:"这是第三项"
            },{
                key:"4",
                value:"这是第四项"
            }];
            //如果选项全部现在 全选按键自动为true
            $scope.itemCheck = function () {
                var flag = 0;
                for(var i = 0; i<$scope.arr.length; i++){
                    if($scope.arr[i].state == true){
                        flag ++;
                    }
                }
                if(flag == $scope.arr.length){
                    $scope.allCheck = true;
                }else{
                    $scope.allCheck = false;
                }
            };

            //全选
            $scope.allCheck=false;
            $scope.all= function () {
                for(var i=0;i<$scope.arr.length;i++){
                    if($scope.allCheck===true){
                        $scope.arr[i].state=true;
                    }else {
                        $scope.arr[i].state=false;
                    }
                }
            };

        //批量删除
        $scope.shanchu = function () {
            for(var i=0;i<$scope.arr.length;i++){
                if($scope.arr[i].state==true){
                    $scope.arr.splice(i,1);
                    i--;
                }
            }
        }

        })
    </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
    <input type="checkbox" ng-model="allCheck" ng-click="all()"/>全选择
    <ul ng-repeat=" i in arr">
        <input type="checkbox" ng-model="i.state" ng-click="itemCheck()">
        {{i.value}}
    </ul>
    <button ng-click="shanchu()">批量删除</button>

</center>
</body>
</html>