angular-简单的删除全选demo

最新推荐文章于 2021-03-09 15:29:25 发布

PatrickYs

最新推荐文章于 2021-03-09 15:29:25 发布

阅读量222

点赞数

本文链接：https://blog.csdn.net/qq_39801871/article/details/78293430

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="angular.js"></script>
    <script src="jquery.1.12.4.js"></script>
    <title>angular删除-添加-全选操作</title>
    <script>
        var app= angular.module("myApp",[]);
        var data=[
            {
                done:false,
                id:"1234",
                name:"ipad",
                price:3400,
                only:10
            },
            {
                done:false,
                id:1244,
                name:"iphone",
                price:6400,
                only:5
            },
            {
                done:false,
                id:1334,
                name:"mypad",
                price:4400,
                only:20
            },
            {
                done:false,
                id:8234,
                name:"zpad",
                price:8400,
                only:130
            }
        ]



        app.controller("myCtrl",function($scope){
            $scope.data=data

            $scope.del=function(deletename){
                var con = confirm("你确认要删除么？");
                if(con == true){
                    for(var i=0;i<$scope.data.length;i++){
                        if($scope.data[i].name==deletename){
                            $scope.data.splice(i,1);
                        }
                    }
                }
            }

            $scope.deleteAll=function(deletename){
                var con = confirm("你确认要删除么？");
                if(con == true){
                    for(var i=0;i<$scope.data.length;i++){
                        if($scope.data[i].done==true){
                            $scope.data.splice(i,1);
                            i--;
                        }else if($scope.data.length-1){
                            alert("请选择删除项目");
                        }
                    }
                }
            }

            $scope.checkall=function(){
                for(var i=0;i<$scope.data.length;i++){
                    if($scope.quan == true){
                        $scope.data[i].done=true;
                    }else{
                        $scope.data[i].done=false;

                    }
                }
            }
            $scope.name="";
            $scope.ff=true;
            $scope.or=function(name)
            {
                $scope.name=name;
            }
            $scope.sousuo="";
            console.log($scope.sousuo);
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">

   <h3>商品库存信息管理</h3>
   <div>
        <input type="text" placeholder="请输入关键字..." ng-model="sousuo">
       <button style="color: #ff0000" ng-click="deleteAll()">批量删除</button>
   </div>

   <table style="text-align: center" border="1">
         <tr>
             <td><input type="checkbox" ng-click="checkall()" ng-model="quan"></td>
             <td ng-click="or('id')">商品编号</td>
             <td ng-click="or('name')">商品名称</td>
             <td>商品价格</td>
             <td>商品库存</td>
             <td>库存操作</td>
         </tr>

       <tr ng-repeat="x in data|filter:sousuo|orderBy:name">
           <td><input type="checkbox" ng-model="x.done" ></td>
           <td>{{x.id}}</td>
           <td>{{x.name}}</td>
           <td>{{"¥:"+x.price}}</td>
           <td>{{x.only}}</td>
           <td><button ng-click="del(x.name)">删除</button></td>
       </tr>

   </table>
</body>
</html>