AngularJs实现删除批量删除

最新推荐文章于 2020-02-14 17:07:52 发布

gh0708

最新推荐文章于 2020-02-14 17:07:52 发布

阅读量365

点赞数

分类专栏： Web前段文章标签： angularjs ng-repeat

本文链接：https://blog.csdn.net/gh0708/article/details/78326623

版权

Web前段专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border-collapse: collapse;
        }
        th,td{
            padding: 10px;
            border: 1px solid #000;
        }
    </style>
    <script src="../angular-1.5.5/angular.min.js"></script>
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.controller("myCtrl",function($scope){
            $scope.data=[{
                "name":"三星",
                "price":"3000",
                "has":true,
                "check":false
            },{
                "name":"huawei",
                "price":"3000",
                "has":true,
                "check":false
            },{
                "name":"苹果",
                "price":"6000",
                "has":true,
                "check":false
            },{
                "name":"小米",
                "price":"2000",
                "has":true,
                "check":false
            }];
            //删除
            $scope.del=function(index){
                console.log(index);
                $scope.data.splice(index,1);
            };
            //全选
            $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){
                //console.log(index);
                if($scope.data[index].check==true){
                    n++;
                }else{
                    n--
                }
                console.log(n);
                if(n==$scope.data.length){
                    $scope.checkAll=true;
                }else{
                    $scope.checkAll=false;
                }
            };
            //批量删除的方法
            $scope.delAll=function(){
                for(var i=0;i<$scope.data.length;i++){
                    if($scope.data[i].check==true){
                        $scope.data.splice(i,1);
                        i--;
                    }
                }
            }


        })
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
    <table>
        <thead>
        <tr>
            <th>序号</th>
            <th><input type="checkbox" ng-model="checkAll" ng-click="check2()">全选</th>
            <th>品牌</th>
            <th>价格</th>
            <th>是否有货</th>
            <th>操作<button ng-click="delAll()">批量删除</button></th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in data">
            <td>{{$index}}</td>
            <td><input type="checkbox" ng-model="item.check" ng-click="count($index)"></td>
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td>{{item.has}}</td>
            <td><button ng-click="del($index)">删除</button></td>
        </tr>
        </tbody>
    </table>

</body>
</html>