angularjs的批量删除,发货,<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            tbody tr:nth-child(even){
                background-color: yellow;
                text-align: center;
            }
            tbody tr:nth-child(odd){
                background: pink;
                text-align: center;
            }
        </style>
        <script type="text/javascript" src="../js/angularjs-1.55/angular.js" ></script>
        <script>
            var app=angular.module("MyApp",[])
            app.controller("MyCtrl",function($scope){
                $scope.zhi=[{
                    ck:false,
                    id:1,
                    shopname:"小米",
                    name:"赵云",
                    hao:"12933101827",
                    price:1500,
                    city:"北京",
                    times:new Date("2018-12-01 01:36:09"),
                    tai:"未发货"
                },{
                    ck:false,
                    id:2,
                    shopname:"OPPO X20",
                    name:"曹操",
                    hao:"17933101827",
                    price:2500,
                    city:"魏县",
                    times:new Date("2017-10-11 08:36:09"),
                    tai:"未发货"
                },{
                    ck:false,    
                    id:3,
                    shopname:"苹果",
                    name:"吕布",
                    hao:"14933101827",
                    price:7500,
                    city:"广平",
                    times:new Date("2018-08-11 12:36:09"),
                    tai:"未发货"
                },{
                    ck:false,    
                    id:4,
                    shopname:"索尼",
                    name:"黄忠",
                    hao:"16933101827",
                    price:500,
                    city:"上海",
                    times:new Date("2018-06-11 12:36:09"),
                    tai:"未发货"
                }]
                $scope.zhuang=function(id){
                    for (index in $scope.zhi) {
                        if ($scope.zhi[index].id==id) {
                            $scope.zhi[index].tai="已发货"
                        }
                    }
                }
                $scope.quanxuan=false;
                $scope.qx=function(){
                    for (index in $scope.zhi) {
                        
                        $scope.zhi[index].ck=$scope.quanxuan;
                    }
                }
                //删除
                $scope.delAll=function(id){
                    for (index in $scope.zhi) {
                        if ($scope.zhi[index].id==id) {
                            $scope.zhi.splice(index,1)
                        }
                    }
                }
                //批量删除
                $scope.pl=function(){
                    var arr=[];
                    for (index in $scope.zhi) {
                        if ($scope.zhi[index].ck==true) {
                            arr.push($scope.zhi[index]);
                        }
                    }
                    if(arr.length<=0){
                        alert("请选择")
                    }else{
                        for (a in arr) {
                            for (index1 in $scope.zhi) {
                                if (arr[a]==$scope.zhi[index1]) {
                                    $scope.zhi.splice(index1,1)
                                }
                            }
                        }
                    }
                }
                //批量发货
                $scope.pf=function(){
                    for (index in $scope.zhi) {
                        if ($scope.zhi[index].ck==true) {
                            $scope.zhi[index].tai="已发货"
                        }
                    }
                }
                //
                $scope.isshow=false;
                $scope.add=function(){
                    $scope.kong=[];
                    var aa=/米/g;
                    
                    var newshopname=$scope.newshopname;
                    var newname=$scope.newname;
                    var newhao=$scope.newhao;
                    var newprice=$scope.newprice;
                    var newcity=$scope.newcity;
                    var id=0;
                    for (index in $scope.zhi) {
                        if ($scope.zhi[index].id>id) {
                            id=$scope.zhi[index].id
                        }
                    }
                    var newid =id+1;
                    if (newshopname=="" || newshopname==null) {
                        $scope.kong.push("商品名不能为空")
                    }
                    if (newname=="" || newname==null) {
                        $scope.kong.push("用户名不能为空")
                    }
                    if (newhao=="" || newhao==null) {
                        $scope.kong.push("手机号不能为空")
                    }
                    if (newprice=="" || newprice==null) {
                        $scope.kong.push("价格不能为空")
                    }
                    if (newcity=="" || newcity==null) {
                        $scope.kong.push("城市不能为空")
                    }
                    if ($scope.kong.length==0) {
                        $scope.zhi.push({
                            ck:false,
                            id:newid,
                            shopname:newshopname.replace(aa,"*"),
                            name:newname,
                            hao:newhao,
                            price:newprice,
                            city:newcity,
                            times:new Date(),
                            tai:"未发货"
                        })
                        $scope.newshopname="";
                        $scope.newname="";
                        $scope.newhao="";
                        $scope.newprice="";
                        $scope.newcity="";
                        $scope.isshow=false;
                    } else{
                        
                    }
                        
                }
                $scope.All1=function(t){
                
                    var m = t.getMonth() + 1;
                    var ks=$scope.ks;
                    var js=$scope.js;
                    
                    if (ks==undefined || ks=="") {
                        ks=1;
                    };
                    if (js==undefined || js=="") {
                        js=12;
                    };
                    
                    if(m>=ks && m<=js){
                        return true;
                    };
                }
            });
        </script>
    </head>
    <body ng-app="MyApp" ng-controller="MyCtrl">
        <center>
            <input type="text" placeholder="用户名搜索" ng-model="cname"/>
            <input type="text" placeholder="手机号搜索" ng-model="chao"/>
            <select ng-model="ci">
                <option value="">选择城市</option>
                <option>北京</option>
                <option>魏县</option>
                <option>广平</option>
                <option>上海</option>
            </select>
            <select ng-model="ta">
                <option value="">选择状态</option>
                <option>未发货</option>
                <option>已发货</option>
            </select>
            <button ng-click="pl()">批量删除</button>
            <button ng-click="pf()">批量发货</button>
            <button ng-click="isshow=true">入库</button><br />
            <select ng-model="ks">
                <option value="">请选择开始月份</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
            </select>
            <select ng-model="js">
                <option value="">请选择结束月份</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
            </select>
            <table border="1" cellspacing="0" width="800px">
                <thead>
                    <th><input type="checkbox" ng-click="qx()" ng-model="quanxuan"></th>
                    <th>ID</th>
                    <th>商品名</th>
                    <th>用户名</th>
                    <th>手机号</th>
                    <th>价格</th>
                    <th>城市</th>
                    <th>下单时间</th>
                    <th>状态</th>
                    <th>操作</th>
                </thead>
                <tbody>
                    <tr ng-repeat="z in zhi | filter:{name:cname} | filter:{hao:chao} | filter:{city:ci} | filter:{tai:ta}" ng-show="All1(z.times)">
                        <td><input type="checkbox" ng-model="z.ck"></td>
                        <td>{{z.id}}</td>
                        <td>{{z.shopname}}</td>
                        <td>{{z.name}}</td>
                        <td>{{z.hao}}</td>
                        <td>{{z.price | currency:"¥"}}</td>
                        <td>{{z.city}}</td>
                        <td>{{z.times| date:"yyyy-MM-dd HH:mm:ss"}}</td>
                        <td>
                             <span ng-show="z.tai=='未发货'" ng-click="zhuang(z.id)">
                                <a href="javascript: void(0);">{{z.tai}}</a>
                            </span>
                            <span ng-show="z.tai=='已发货'">已发货</span>
                           
                        </td>
                        <td>
                            <button ng-click="delAll(z.id)">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <form ng-show="isshow">
                <input type="text" placeholder="请输入商品名" ng-model="newshopname"/><br /><br />
                <input type="text" placeholder="请输入用户名" ng-model="newname"/><br /><br />
                <input type="text" placeholder="请输入手机号" ng-model="newhao"/><br /><br />
                <input type="number" placeholder="请输入价格" ng-model="newprice"/><br /><br />
                <select ng-model="newcity">
                    <option value="">选择城市</option>
                    <option>北京</option>
                    <option>魏县</option>
                    <option>广平</option>
                    <option>上海</option>
                </select>
                <button ng-click="add()">提交</button>
            </form>
            <ul>
                <ol ng-repeat="k in kong">{{k}}</ol><br />
            </ul>
        </center>
    </body>
</html>

相关文章: