angularJS全选/批量删除

<!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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值