批量删除

来源:互联网 发布:java \\是转移吗 编辑:程序博客网 时间:2024/05/27 14:14
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>商品管理系统</title>        <script src="../lib/js/ionic.bundle.js"></script>        <style>            table tr{                border: 1px solid;            }            body{                width: 800px;                margin: 0 auto;            }            table tr:nth-child(2n){                background-color: #CCCCCA;            }        </style>        <script>            angular.module("myapp",[])            .controller("demoC",function($scope){                $scope.title="state";                $scope.desc=false;                //数组                $scope.goods=[];                for(var i=1;i<5;i++){                    var g={                        "checked":false,   //复选是否被选中                        "id":i,                        "gname":"云南白药"+i,                        "address":"云南",                        "state":"发货",                        "regDate":new Date(),                         "price":100+i                    };                    var g2={                        "checked":true,                        "id":10+i,                        "gname":"云南白药"+i,                        "address":"云南",                        "state":"已发货",                        "regDate":new Date("2016-"+i+"-1 3:01:02"),                         "price":100+i                    };                    $scope.goods.push(g);                    $scope.goods.push(g2);                }                //全选操作                $scope.ckAll=function(){                    var ck=$scope.isck;// 表头中的复选框                    for(var i=0;i<$scope.goods.length;i++){                        $scope.goods[i].checked=ck;                    }                }                $scope.delAll=function(){                    var b=false; //默认么有选中的                    for(var i=0;i<$scope.goods.length;i++){                        if($scope.goods[i].checked==true){                            b=true;                            break;                        }                    }                    console.log("是否有选择",b);                    //执行删除操作                    if(b==true){                        for(var i=0;i<$scope.goods.length;i++){                        if($scope.goods[i].checked==true){                            $scope.goods.splice(i,1);                            i--;  //删除后,下次依然从当前索引开始                        }                    }                       }else{                        alert("请选择后操作");                    }                }                //批量发货                $scope.fhAll=function(){                    var b=false; //默认么有选中的                    for(var i=0;i<$scope.goods.length;i++){                        if($scope.goods[i].checked==true){                            b=true;                            break;                        }                    }                    console.log("是否有选择",b);                    //执行删除操作                    if(b==true){                        for(var i=0;i<$scope.goods.length;i++){                        if($scope.goods[i].checked==true){                            $scope.goods[i].state="已发货";                        }                    }                       }else{                        alert("请选择后操作");                    }                }                //单个删除                $scope.del=function(g){  //当前删除行的对象                    for(var i=0;i<$scope.goods.length;i++){                        if($scope.goods[i].id==g.id){   //查找当前删除的对象在数组中的索引                            $scope.goods.splice(i,1);  //                        }                    }                }            })        </script>    </head>    <body ng-app="myapp" ng-controller="demoC">        <button ng-click="delAll()">批量删除</button>        <button ng-click="fhAll()">批量发货</button>        <table border="1px">            <tr style="background-color: #787876;">                <td><input type="checkbox" ng-model="isck" ng-change="ckAll()" /></td>                <td ng-click="title='gname';desc=!desc">商品名称</td>                <td ng-click="title='address';desc=!desc">商品产地</td>                <td ng-click="title='price';desc=!desc">商品价格</td>                <td ng-click="title='regDate';desc=!desc">生产日期</td>                <td>状态</td>                <td>操作</td>            </tr>            <tr style="border: 1px;" ng-repeat="good in goods|orderBy:title:desc"><!--|orderBy 内置排序过滤  title  desc  是两个变量 -->                <td><input type="checkbox" ng-model="good.checked" /> </td>                <td>                <span ng-hide="good.edit">{{good.gname}} </span>                    <span ng-show="good.edit==true"> <input ng-model="good.gname" />  </span>                   </td>                <td>{{good.address}}</td>                <td>{{good.price}}</td>               <td>{{good.regDate|date:"yyyy年MM月dd日 hh时mm分ss秒"}}</td>               <td>               <span ng-show="good.state=='已发货'">                   {{good.state}}               </span>               <span ng-show="good.state=='发货'">                    <a href="#" ng-click="good.state='已发货'">                {{good.state}}                </a>               </span>               </td>               <td>                <button ng-click="del(good)">删除</button> |                      <!-- good.gai:true 显示保存 ;   -->                    <button ng-hide="good.edit" ng-click="good.edit=true">修改</button>                    <button ng-show="good.edit==true" ng-click="good.edit=false">保存</button>               </td>            </tr>        </table>    </body></html>
原创粉丝点击