商品订单

最新推荐文章于 2022-06-17 10:13:46 发布

yushengniwo

最新推荐文章于 2022-06-17 10:13:46 发布

阅读量350

点赞数

本文链接：https://blog.csdn.net/yushengniwo/article/details/78854067

版权

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script src="js/jquery-2.1.0.js"></script>
  <script src="js/angular.js"></script>
  <script>
   var app=angular.module("myapp",[]);
   app.controller("myctrl",function($scope){
    $scope.shop=[{id:2001,name:"iphonex",adin:"张三",phone:13525565588,price:8699,cheng:"北京","date":new Date(),state:true,xuan:false,color: "#31FE31"},
    {id:3006,name:"iphone6",adin:"王红",phone:18524565588,price:5635,cheng:"郑州","date":new Date(),state:true,xuan:false,color: "#31FE31"},
    {id:5312,name:"iphone7",adin:"赵小龙",phone:17545585598,price:6188,cheng:"北京","date":new Date(),state:false,xuan:false,color: "#FFFF31"},
    {id:2132,name:"iphone8",adin:"赵强",phone:17625565618,price:7190,cheng:"上海","date":new Date(),state:false,xuan:false,color: "#FFFF31"}];
    //删除
    $scope.delete=function(){
     var arr=[];
     for (index in $scope.shop) {
      if ($scope.shop[index].xuan) {
       if ($scope.shop[index].state) {
       arr.push($scope.shop[index]);
      }
      }

     }
     if (arr.length>0) {
      for(index1 in arr){
       for(index2 in $scope.shop){
        if(arr[index1]==$scope.shop[index2]){
         $scope.shop.splice(index2,1);
        }
       }
      }
     }else{
      alert("先选择被选中的发货商品");
     }
    }
    //新增
    $scope.isShow=false;
    $scope.add=function(){

     if ($scope.isShow) {
      $scope.isShow=false;
     } else{
      $scope.isShow=true;
     }

    }
    //全选
    $scope.seleAll=false;
    $scope.checks=function(){
     if ($scope.seleAll) {
      for (index in $scope.shop) {
       $scope.shop[index].xuan=true;
      }
     } else{
      for (index in $scope.shop) {
       $scope.shop[index].xuan=false;
      }
     }
    }
    //反选
    $scope.checkAll=function(){
     var flag=false;
     for (index in $scope.shop) {
      if (!$scope.shop[index].xuan) {
       flag=true;
      }
     }
     if(flag){
      $scope.seleAll=false;
     }else{
      $scope.seleAll=true;
     }
    }
    //排序
    $scope.c="-";
    $scope.d="name";
    $scope.order=function(columnName){

     if ($scope.c=="-") {
      $scope.c="";
     } else{
      $scope.c="-";
     }
    }
    //状态
    $scope.changestate=function(x){
     x.state=true;
    }

    //添加
    $scope.newname="";
    $scope.newadin="";
    $scope.newphone="";
    $scope.newprice="";
    $scope.newcheng="";

    $scope.tian=function(){

     if($scope.newname==null||$scope.newname==""){
      $(".a").show();
      $("#name").css("border","1px solid red");
     }else{
      $(".a").hide();
      $("#name").css("border","1px solid black");
     }
     if($scope.newadin==null||$scope.newadin==""){
      $(".b").show();
      $("#adin").css("border","1px solid red");
     }else{
      $(".b").hide();
      $("#adin").css("border","1px solid black");
     }
     if($scope.newphone==null||$scope.newphone==""){
      $(".c").show();
      $("#phone").css("border","1px solid red");
     }else{
      $(".c").hide();
      $("#phone").css("border","1px solid black");
     }
     if($scope.newprice==null||$scope.newprice==""){
      $(".d").show();
      $("#price").css("border","1px solid red");
     }else{
      $(".d").hide();
      $("#price").css("border","1px solid black");
     }
     if($scope.newcheng==null||$scope.newcheng==""){
      $(".e").show();
      $("#cheng").css("border","1px solid red");
     }else{
      $(".e").hide();
      $("#cheng").css("border","1px solid black");
     }
     if ($scope.newname==""||$scope.newadin==""||$scope.newphone==""||$scope.newprice==""||$scope.newcheng=="") {


     } else{
      var tian={
      name:$scope.newname,
      adin:$scope.newadin,
      phone:parseInt($scope.newphone),
      price:parseInt($scope.newprice),
      cheng:$scope.newcheng,
      "date":new Date(),
      state:false,
      xuan:false,
      color: "#FFFF31"}
     $scope.shop.push(tian);
     $scope.newname="";
     $scope.newadin="";
     $scope.newphone="";
     $scope.newprice="";
     $scope.newcheng="";
     }


    }
   });
  </script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
  <center>
   <button style="background: blue;" ng-click="add()">新增订单</button>
   <button style="background: blue;" ng-click="delete()">批量删除</button>
   <input type="text" placeholder="按商品名称查询" style="border-radius: 10px;" ng-model="sername"/>
   <input type="text" placeholder="按手机号查询" style="border-radius: 10px;" ng-model="serphone"/>
   <select ng-model="selestate">
    <option value="">按状态查询</option>
    <option value="true">已发货</option>
    <option value="false">未发货</option>
   </select>
   <table border="1px soild gray" cellpadding="10" cellspacing="0">
    <tr>
     <th><input type="checkbox" ng-click="checks()" ng-model="seleAll"/></th>
     <th>ID<input type="button" ng-click="order('id')" value="排序" style="background: deepskyblue;"/></th>
     <th>商品名</th>
     <th>用户名</th>
     <th>手机号</th>
     <th>价格<input type="button" ng-click="order('price')" value="排序" style="background: deepskyblue;"/></th>
     <th>城市</th>
     <th>下单时间<input type="button" ng-click="order('time')" value="排序" style="background: deepskyblue;"/></th>
     <th>状态</th>
    </tr>
    <tr ng-repeat="x in shop | filter:{name:sername,phone:serphone,state:selestate} | orderBy:(c+d)">
     <td><input type="checkbox" ng-model="x.xuan" ng-click="checkAll()"/></td>
     <td>{{x.id}}</td>
     <td>{{x.name}}</td>
     <td>{{x.adin}}</td>
     <td>{{x.phone}}</td>
     <td>{{x.price | currency:"￥:"}}</td>
     <td>{{x.cheng}}</td>
     <td>{{x.date | date:"MM-dd hh:mm:ss"}}</td>
     <td>
      <input type="button" disabled="disabled" style="background:green;" value="已发货" ng-show="x.state" />
      <input type="button" style="background:yellow;" value="未发货" ng-show="!x.state" ng-click="changestate(x)"/>
     </td>
    </tr>
   </table><br />
   <fieldset ng-show="isShow" style="width: 400px; margin-top: 20px;">
    <legend>添加订单信息</legend><br />
    <button>新增订单</button><br/>
    <form>
     商品名<input type="text" ng-model="newname" id="name"/>
     <span style="background: yellow; border: 1px solid red;" hidden="hidden" class="a">商品名不能为空</span><br />
     用户名<input type="text" ng-model="newadin" id="adin"/>
     <span style="background: yellow; border: 1px solid red;" hidden="hidden" class="b">用户名不能为空</span><br />
     手机号<input type="text" ng-model="newphone" id="phone"/>
     <span style="background: yellow; border: 1px solid red;" hidden="hidden" class="c">手机号不能为空</span><br />
     价格<input type="text" ng-model="newprice" id="price"/>
     <span style="background: yellow; border: 1px solid red;" hidden="hidden" class="d">价格不能为空</span><br />
     城市<select ng-model="newcheng" id="cheng">
      <option value="">--选择城市--</option>
      <option>山西</option>
      <option>河北</option>
     </select>
     <span style="background: yellow; border: 1px solid red;" hidden="hidden" class="e">城市必须选择</span><br />
     <input type="button" value="保存" ng-click="tian()"/>
    </form>
   </fieldset>
  </center>
</body>
</html>