增删该查

来源：互联网发布：apache php 关系编辑：程序博客网时间：2024/05/01 04:04

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8" />
       <title></title>
       <style type="text/css">
       .gehang:nth-child(2n){
          background-color: burlywood;
       }
           tr:hover{
               background-color: yellow;
           }
           li{
               color: red;
           }
       </style>
       <script src="js/angular.min.js"></script>
       <script src="js/jquery-2.1.0.js"></script>
       <script>
           angular.module("myapp", [])
               .controller("democ", function($scope) {
                   //创建一个数组对象
                       $scope.order = ["请选择排序方式", "按照库存数量正序", "按照库存数量倒序"];
                   $scope.datas = [{
                       id: 2001,
                       name: "iphoneX",
                       yhm: "张三",
                       sjh: 1511111111111,
                       price: 8699+1,
                       cry: "北京",
                       xdsj: 11 - 2310001,
                       zt: "已发货",
                       state: false
                   }, {
                       id: 2002,
                       name: "iphone6",
                       yhm: "王红",
                       sjh: 162222222222,
                       price: 5696,
                       cry: "郑州",
                       xdsj: new Date('11-23 10:00:00'),
                       zt: "已发货",
                       state: false
                   }, {
                       id: 2003,
                       name: "iphone7",
                       yhm: "赵小龙",
                       sjh: 173333333333,
                       price: 6180,
                       cry: "北京",
                       xdsj: 132310003,
                       zt: "未发货",
                       state: false
                   }, {
                       id: 2004,
                       name: "iphone8",
                       yhm: "赵强",
                       sjh: 184444444444,
                       price: 7190,
                       cry: "上海",
                       xdsj:14-2010004,
                       zt: "未发货",
                       state: false
                   },{
                       id: 2005,
                       name: "iphone9",
                       yhm: "赵里",
                       sjh: 195555555555,
                       price: 12500,
                       cry: "山东",
                       xdsj:15-2010005,
                       zt: "未发货",
                       state: false
                   }];
                   //点击复选框全选
                   $scope.qx = function() {
                       var b = $scope.issk;
                       for(var i = 0; i < $scope.datas.length; i++) {
                           $scope.datas[i].state = b;
                       }
                   }

                   //点击订单显示数据
                   $scope.tj = function() {
                       $scope.isshow = true;
                   }
                   //保存数据提交到原始数据里
                   $scope.chAll = function() {
                       $scope.array=[];
                        if($scope.name==undefined || $scope.name==""){
                           $scope.array.push("商品名不能为空");
                           $("#q").css("border-color","red");
                        }else{
                           $("#q").css("border-color","");
                        }
                        if($scope.yhm==undefined || $scope.yhm==""){
                           $scope.array.push("用户名不能为空");
                           $("#w").css("border-color","red");
                        }else{
                           $("#w").css("border-color","");
                        }
                          if($scope.sjh==undefined || $scope.sjh==""){
                           $scope.array.push("手机号不能为空");
                           $("#e").css("border-color","red");
                        }else{
                           $("#e").css("border-color","");
                        }
                            if($scope.price==undefined || $scope.price==""){
                           $scope.array.push("价格不能为空");
                           $("#r").css("border-color","red");
                        }else{
                           $("#r").css("border-color","");
                        }
                              if($scope.cry==undefined || $scope.cry==""){
                           $scope.array.push("城市不能为空");
                           $("#t").css("border-color","red");
                        }else{
                           $("#t").css("border-color","");
                        }
                        if($scope.array.length==0){
                           $scope.datas.push({
                               "id":$scope.id+1,
                               "name":$scope.name,
                               "yhm":$scope.yhm,
                               "sjh":$scope.sjh,
                               "price":$scope.price,
                               "cry":$scope.cry,
                                 "xdsj":new Date("yyyy-MM-dd HH:mm:ss"),
                                 "zt":"未发货"

                           });
                           $scope.isshow=false;
                        }




                   }


                   //批量删除
                   $scope.pldel=function(){
                       var b=false;
                       for(var i=0;i<$scope.datas.length;i++){
                           if($scope.datas[i].state==true){
                               b=true;
                               break;
                           }
                       }
                       if(b==true){
                           for(var i=0;i<$scope.datas.length;i++){
                               if($scope.datas[i].state==true){
                                   $scope.datas.splice(i,1);
                                   i--;
                               }
                           }
                       }
                   }

               });
       </script>
   </head>

   <body ng-app="myapp" ng-controller="democ">
       <button ng-click="tj()" style="background-color: dodgerblue;">新增订单</button>
       <button ng-click="pldel()"     style="background-color: dodgerblue;">批量删除</button>
       <input placeholder="按照商品名字查询" style="margin-left: 50px;" ng-model="a" />
       <input placeholder="按照手机号查询" ng-model="aa" />
       <select ng-model="SelectedName" ng-init="SelectedName = order[0]" ng-options="x for x in order" ng-change="change()">{{x}}</select>
       <table border="1" style="width: 700px; height: 30px; margin-top: 40px;">
           <tr style="background-color: darkgray;">
               <th><input type="checkbox" ng-model="issk" ng-click="qx()" /></th>
               <th ng-click="title='id';desc=!desc">id<button style="background-color:green;">排序</button></th>
               <th >商品名</th>
               <th >用户名</th>
               <th>手机号</th>
               <th ng-click="title='price';desc=!desc">价格<button style="background-color:green;">排序</button></th>
               <th>城市</th>
               <th ng-click="title='xdsj';desc=!desc" >下单时间<button style="background-color:green;">排序</button></th>
               <th>状态</th>

           </tr>
           
           <tr ng-repeat="dat in datas|filter:a|filter:aa|orderBy:title:desc" class="gehang">
               <td><input type="checkbox" ng-model="dat.state" /></td>
               <td>{{dat.id}}</td>
               <td>{{dat.name}}</td>
               <td>{{dat.yhm}}</td>
               <td>{{dat.sjh}}</td>
               <td>{{dat.price|currency:'￥：'}}</td>
               <td>{{dat.cry}}</td>
               <td>{{dat.xdsj |date:'yyyy-mm-dd hh:mm:ss'}}</td>
               <td>

                   <span ng-show="dat.zt=='已发货'" style="background-color: green;">
                        {{dat.zt}}
                    </span>
                   <span ng-show="dat.zt=='未发货'" style="background-color:yellow">
                    <a href="#" ng-click="dat.zt='已发货'">
                    {{dat.zt}}
                    </a>

           </td>

       </tr>

   </table>
   <form style="margin-left: 300px; margin-top: 30px;" ng-show="isshow">
           <tr>
               商品名<input ng-model="name" id="q"/><span ng-model="o"></span><br />
               用户名<input ng-model="yhm" id="w" /><br />
               手机号<input ng-model="sjh" id="e"/><br />
               价格为<input ng-model="price" id="r"/><br />
               城市<select style="width: 170px;" ng-model="cry" id="t">
                   <option>---请选择城市--</option>
                   <option>河南</option>
                   <option>河北</option>
                   <option>山东</option>
                   <option>天津</option>

               </select><br />
               <div>
                   <ul>

                       <li ng-repeat=" a in array">{{a}}</li>
                   </ul>
               </div>
               <tr>
                  <button style="margin-left: 60px;" ng-click="chAll()">保存</button>
           </tr>

       </form>

   </body>
</html>

阅读全文

0 0