anglir 模拟月考

        <meta charset="UTF-8">
        <title></title>
        <style>
            tbody tr:nth-child(odd){
                background-color:#F2F2F2;
                text-align: center;
            }
            tbody tr:nth-child(even){
                background-color:#C0C0C0;
                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,
                    shangname:"OPPO A53",
                    name:"关羽",
                    hao:"13246791",
                    price:4999,
                    city:"北京",
                    times:new Date("2018-01-25 22:20:05"),
                    tai:"未发货"
                },{
                    ck:false,
                    id:2,
                    shangname:"苹果",
                    name:"赵云",
                    hao:"132787791",
                    price:49,
                    city:"上海",
                    times:new Date("2018-02-25 22:20:05"),
                    tai:"未发货"
                },{
                    ck:false,
                    id:3,
                    shangname:"小米",
                    name:"李锐",
                    hao:"132777791",
                    price:400,
                    city:"重庆",
                    times:new Date("2018-03-25 22:20:05"),
                    tai:"未发货"
                },{
                    ck:false,
                    id:4,
                    shangname:"三星",
                    name:"短的",
                    hao:"132784491",
                    price:9,
                    city:"广平",
                    times:new Date("2018-04-25 22:20:05"),
                    tai:"未发货"
                }];
                $scope.qx1=false;
                $scope.qx=function(){
                    for (index in $scope.zhi) {
                        $scope.zhi[index].ck=$scope.qx1;
                    }
                }
                $scope.fa=function(id){
                    for (index in $scope.zhi) {
                        if($scope.zhi[index].id==id){
                            $scope.zhi[index].tai="已发货";
                        }
                    }
                }
                //批量删除
                $scope.telAll=function(){
                    for(var i=0; i<$scope.zhi.length; i++){
                        if($scope.zhi[i].ck && $scope.zhi[i].tai=="已发货"){
                            $scope.zhi.splice(i,1);
                            i--;
                        }
                    }
                }
                //新增
                $scope.isshow=false;
                $scope.a1=false;
                $scope.a2=false;
                $scope.a3=false;
                $scope.a4=false;
                $scope.a5=false;
                $scope.add=function(){
                    var arr=[];
                    var newshangname=$scope.newshangname;
                    var newname=$scope.newname;
                    var newhao=$scope.newhao;
                    var newprice=$scope.newprice;
                    var newcity=$scope.newcity;
                    if (newshangname=="" || newshangname==undefined) {
                            arr.push(1);
                        $scope.a1=true;
                    }else{
                        $scope.a1=false;
                    }
                    if (newname=="" || newname==undefined) {
                            arr.push(2);
                        $scope.a2=true;
                    }else{
                        $scope.a2=false;
                    }
                    if (newhao=="" || newhao==undefined) {
                            arr.push(3);
                        $scope.a3=true;
                    }else{
                        $scope.a3=false;
                    }
                    if (newprice=="" || newprice==undefined) {
                            arr.push(4);
                        $scope.a4=true;
                    }else{
                        $scope.a4=false;
                    }
                    if (newcity=="" || newcity==undefined) {
                            arr.push(5);
                        $scope.a5=true;
                    }else{
                        $scope.a5=false;
                    }
                    //
                    var id=0;
                        for (index in $scope.zhi) {
                            if ($scope.zhi[index].id>id) {
                                id=$scope.zhi[index].id;
                            }
                        }
                    var newid=id+1;
                    //
                    if(arr.length==0){
                        //添加
                        $scope.zhi.push({
                            ck:false,
                            id:newid,
                            shangname:newshangname,
                            name:newname,
                            hao:newhao,
                            price:newcity,
                            city:newcity,
                            times:new Date(),
                            tai:"未发货"
                        });
                        $scope.isshow=false;
                        $scope.newshangname="";
                        $scope.newname="";
                        $scope.newhao="";
                        $scope.newprice="";
                        $scope.newcity="";
                    }
                    
                }
                $scope.zhi1="";
                $scope.zhi2="id";
                $scope.idclick=function(cc){
                    $scope.zhi2=cc;
                    if ($scope.zhi1=="") {
                        $scope.zhi1="-";
                    }else{
                        $scope.zhi1="";
                    }
                }
                
            })
        </script>
    </head>
    <body ng-app="MyApp" ng-controller="MyCtrl">
        <center>
            <button ng-click="isshow='true'">新增订单</button>
            <button ng-click="telAll()">批量删除</button>
            <input type="text" ng-model="namemh" placeholder="按商品名称查询" />
            <input type="text" ng-model="sjh" placeholder="按手机号查询" />
            <select  ng-model="ta">
                <option value="">按状态查询</option>
                <option>未发货</option>
                <option>已发货</option>
            </select>
            <table border="1" cellspacing="0" width="700px">
                <thead>
                    <th><input type="checkbox" ng-click="qx()" ng-model="qx1"></th>
                    <th ng-click="idclick('id')">ID</th>
                    <th>商品名</th>
                    <th>用户名</th>
                    <th>手机号</th>
                    <th ng-click="idclick('price')">价格</th>
                    <th>城市</th>
                    <th ng-click="idclick('times')">下单时间</th>
                    <th>状态</th>
                </thead>
                <tbody>
                    <tr ng-repeat="z in zhi | filter:{shangname:namemh} | filter:{hao:sjh} | filter:{tai:ta} | orderBy:(zhi1+zhi2)">
                        <td><input type="checkbox" ng-model="z.ck"></td>
                        <td>{{z.id}}</td>
                        <td>{{z.shangname}}</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="fa(z.id)">
                                <button style="background-color: yellow;">{{z.tai}}</button>
                            </span>
                            <span ng-show="z.tai=='已发货'" style="background-color: green;">{{z.tai}}</span>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div style="width: 500px; height: 300px;" ng-show="isshow">
                商品名<input type="text" ng-model="newshangname"/><span ng-show="a1" style="background-color: yellow; padding-right: 50px; border: solid red;">商品名不能为空</span><br /><br />
                用户名<input type="text" ng-model="newname"/><span ng-show="a2"  style="background-color: yellow; padding-right: 50px; border: solid red;">用户名不能为空</span><br /><br />
                手机号<input type="number" ng-model="newhao"/><span ng-show="a3" style="background-color: yellow; padding-right: 50px; border: solid red;">手机号不能为空</span><br /><br />
                价格为<input type="number" ng-model="newprice"/><span ng-show="a4" style="background-color: yellow; padding-right: 50px; border: solid red;">价格不能为空</span><br /><br />
                城市<select ng-model="newcity">
                        <option value="">选择城市</option>
                        <option>广平</option>
                        <option>重庆</option>
                        <option>上海</option>
                        <option>北京</option>
                    </select><span ng-show="a5" style="background-color: yellow; padding-right: 50px; border: solid red;">城市不能为空</span><br /><br />
                    <button ng-click="add()">保存</button>
                    <button ng-click="isshow=false">关闭</button>
            </div>
        </center>