angular集合啦吧

最新推荐文章于 2021-05-25 12:50:34 发布

Guiyide

最新推荐文章于 2021-05-25 12:50:34 发布

阅读量246

点赞数

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
   <script type="text/javascript" src="js/angular.js" ></script>
   <script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
   <style type="text/css">
       .main{
           width: 1226px;
           height: 400px;
           margin: 0 auto;
           background: burlywood;
       }

       .search{
           width: 160px;
           height: 20px;
            border-radius: 20px;
            background: no-repeat url(img/图片1_03.gif) right;
       }

       #button{
          width: 70px;
          height: 28px;
          background: greenyellow;
          border-radius: 5px;
          border-style: none;
       }

       .table2{
           width: 1220px;
           height: 120px;
           margin: 0 auto;
       }

       .table2 tr:nth-child(even){
           background: blue;
       }

       .table2 tr:nth-child(odd){
           background: yellowgreen;
       }

       .num{
           width: 40px;
       }

       a{
           text-decoration: none;
       }
       #btn1,#btn2{
           color: white;
           width: 100px;
           margin-right: 88px;
           border: solid red;
           background: #ff3b30;
       }

       .ErrorColor{
           border:1px solid #ff3b30;
       }

       .SuccessColor{
           border:1px solid black;
       }

       .paixu{
           background-color: #28a54c;
           border-radius: 5px;
           color: white;
           border:solid #28a54c;
       }
   </style>
   <script>
       var app=angular.module("myApp",[]);
       var index=1;

         // 敏感词过滤
        app.filter("sensitiveWord", function () {
            return function (msg, flag) {
                return msg.replace(flag, "*");
            }
        });

        app.controller("myCtrl",function($scope){
           $scope.indexs;
           /*$scope.date=new Date();*/

           $scope.data=[{
               name:"云南白药",
               num:1,
           address:"云南",
               price:19.90,
          totalPrice:19.90,
             checked:false,
          orderstate:true,
               state:false,
                date:"9-01 10:10"
           },{
           name:"999感冒灵",
               num:1,
           address:"北京",
               price:12.50,
           totalPrice:12.50,
              checked:false,
           orderstate:false,
               state:false,
               date:"1-02 10:10"
           },{
               name:"感康",
               num:1,
           address:"河北",
               price:16.60,
          totalPrice:16.60,
             checked:false,
          orderstate:false,
               state:false,
               date:"1-03 10:10"
           }]


           /*$scope.sel="";
           if($scope.sel="排序"){
           $scope.sel="";
           }*/
           //排序
           $scope.order1='name';
           $scope.order2='-';

           $scope.dian=function(dians){
              $scope.order1=dians;
              if($scope.order2==""){
                 $scope.order2="-";
              }else{
                 $scope.order2="";
              }
           }



           // 通过月份判断显示的信息
            $scope.filterByMonth = function (d) {
                // 判断‘是否有选择查询时间段的开始时间’条件是否成立，成立则向下继续判断
                if ($scope.month_start == undefined || $scope.month_end == "") {
                    return true;
                }
                // 判断‘是否有选择查询时间段的结束时间’条件是否成立，成立则向下继续判断
                if ($scope.month_start == undefined || $scope.month_end == "") {
                    return true;
                }
                // 获取到查询时间段的开始时间
                var beginMonth = parseInt($scope.month_start);
                // 获取到查询时间段的结束时间
                var endMonth = parseInt($scope.month_end);
                // 判断‘开始时间’到‘结束时间’条件是否成立，成立则向下继续判断
                if (beginMonth > endMonth) {
                    return true;
                }
                // 定义判断方法：没有规定时间段时，从信息列表‘第一条信息’到‘最后一条信息’为查询条件
                var month = d.date.substr(0, d.date.indexOf("-"));
                // 获取到符合条件的信息
                month = parseInt(month);
                // 将符合条件的信息输出到界面中
                return (month >= beginMonth && month <= endMonth);
            };

          //删除
           $scope.del=function(index){
                 if($scope.data[index].state==true && $scope.data[index].orderstate==true){
                  if(window.confirm("确定要删除吗？")){
                     $scope.data.splice(index,1);
                  }

                 }else{
                     alert("请选中后删除！并且只能删除已发货的！");
                 }
           }


       //入库
          $scope.addisShow=false;
          $scope.add=function(){
           if($scope.addisShow){
           $scope.addisShow=false;
           }else{
           $scope.addisShow=true;
           }
          }


          $scope.insert=function(){
            $scope.c_name="";
            $scope.c_number="";
            $scope.c_address="";
            $scope.c_price="";
            $scope.flag1=false;
            $scope.flag2=false;
            $scope.flag3=false;
            $scope.flag4=false;

            if($scope.g_name=="" || $scope.g_name==null){
              $scope.flag1=true;
              $scope.c_name="ErrorColor";

            }else if($scope.g_name.length<4 || $scope.g_name.length>20){
               $scope.flag1=true;
               $scope.c_name="ErrorColor";
            }else{
               $scope.flag1=false;
               $scope.c_name="SuccessColor"
            }

            if($scope.g_number=="" || $scope.g_number==null){
              $scope.flag2=true;
              $scope.c_number="ErrorColor";
            }else if(isNaN($scope.g_number)){
                   $scope.flag2=true;
                   $scope.c_number="ErrorColor"
            }else{
               $scope.flag2=false;
               $scope.c_number="SuccessColor"
            }


             if($scope.g_address=="" || $scope.g_address==null){
              $scope.flag3=true;
              $scope.c_address="ErrorColor";

            }else if($scope.g_address.length<4 || $scope.g_address.length>8){
               $scope.flag3=true;
               $scope.c_address="ErrorColor";
            }else{
               $scope.flag3=false;
               $scope.c_address="SuccessColor"
            }

            if($scope.g_price=="" || $scope.g_price==null){
              $scope.flag4=true;
              $scope.c_price="ErrorColor";
            }else if(isNaN($scope.g_price)){
                   $scope.flag4=true;
                   $scope.c_price="ErrorColor"

            }else{
               $scope.flag4=false;
               $scope.c_price="SuccessColor"
            }

            if($scope.flag1!=true && $scope.flag2!=true && $scope.flag3!=true && $scope.flag4!=true){
               $scope.data.push({
                  name:$scope.g_name,
                  num:$scope.g_number,
              address:$scope.g_address,
                price:$scope.g_price,
              });
              $scope.addisShow=false;
            }else{
               $(".error").css({" background-color":"#FEB6C1","font-size":"16px","color":"#93212E"});
            }
            $scope.g_name="";
           $scope.g_number="";
           $scope.g_address="";
           $scope.g_price="";


          }

       //全选、反选
       $scope.AllSelect=false;
           $scope.AllSelectFun=function(){
           if($scope.AllSelect){
               for(index in $scope.data){
                   $scope.data[index].state=true;
               }
           }else{
               for(index in $scope.data){
                   $scope.data[index].state=false;
               }
           }
          }

       //全不选
       $scope.select=function(){
          var flag=false;
          for(index in $scope.data){
              if(!$scope.data[index].state){
                  flag=true;
              }
          }

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


       //减
       $scope.less=function(index){
           if($scope.data[index].num>1){
               $scope.data[index].num--;
           }else{
               $scope.del(index);
           }
          }


       //加
       $scope.adds=function(index){
           $scope.data[index].num++;
          }


       //数量输入框必须为1以上，不能为负数
       $scope.change=function(index){
           if($scope.data[index].num>=1){

           }else{
               $scope.data[index].num=1;
           }
       }

       //总数量
       $scope.Allnum=function(){
           var Allnums=0;
           for(var i=0; i<$scope.data.length; i++){
               Allnums+=$scope.data[i].num;
           }
          return Allnums;
       }

      //总价
      $scope.AlltotalPrice=function(){
          var allPrice=0;
          for(var i=0; i<$scope.data.length;i++){
             allPrice +=$scope.data[i].num*$scope.data[i].price;
             allPrice.toFixed(2);
          }

          return allPrice.toFixed(2);
       }
       //清空购物车
       $scope.clear=function(){
           if(window.confirm("确定要清空购物车吗？")){
               $scope.data=[];
           }
       }

       //批量删除
       $scope.delselect=function(){
       var selArr=[];
       for(index in $scope.data){
          if($scope.data[index].state){
              if($scope.data[index].orderstate){
                  selArr.push($scope.data[index].name);
              }

          }
       }

       if(selArr.length>0){
          if(window.confirm("确定要删除吗？")){
           for(index1 in selArr){
               for(index2 in $scope.data){
                   if(selArr[index1]==$scope.data[index2].name){
                       $scope.data.splice(index2,1);
                   }
               }
           }
          }
       }else{
           alert("请选择！");
       }

       }

       //修改
       $scope.editisShow=false;
       $scope.updata=function(index){
          if($scope.editisShow){
             $scope.editisShow=false;
          }else{
             $scope.editisShow=true;
          }
       $scope.gai_name=$scope.data[index].name;
       $scope.gai_number=$scope.data[index].num;
       $scope.gai_address=$scope.data[index].address;
       $scope.gai_price=$scope.data[index].price;
        indexs=index;
       }

       $scope.gai=function(){
               $scope.c_name="";
            $scope.c_number="";
            $scope.c_address="";
            $scope.c_price="";
            $scope.flag1=false;
            $scope.flag2=false;
            $scope.flag3=false;
            $scope.flag4=false;

            if($scope.gai_name=="" || $scope.gai_name==null){
              $scope.flag1=true;
              $scope.c_name="ErrorColor";

            }else if($scope.gai_name.length<4 || $scope.gai_name.length>20){
               $scope.flag1=true;
               $scope.c_name="ErrorColor";
            }else{
               $scope.flag1=false;
               $scope.c_name="SuccessColor"
            }

            if($scope.gai_number=="" || $scope.gai_number==null){
              $scope.flag2=true;
              $scope.c_number="ErrorColor";
            }else if(isNaN($scope.gai_number)){
                   $scope.flag2=true;
                   $scope.c_number="ErrorColor"
            }else{
               $scope.flag2=false;
               $scope.c_number="SuccessColor"
            }


             if($scope.gai_address=="" || $scope.gai_address==null){
              $scope.flag3=true;
              $scope.c_address="ErrorColor";

            }else if($scope.gai_address.length<4 || $scope.gai_address.length>8){
               $scope.flag3=true;
               $scope.c_address="ErrorColor";
            }else{
               $scope.flag3=false;
               $scope.c_address="SuccessColor"
            }

            if($scope.gai_price=="" || $scope.gai_price==null){
              $scope.flag4=true;
              $scope.c_price="ErrorColor";
            }else if(isNaN($scope.gai_price)){
                   $scope.flag4=true;
                   $scope.c_price="ErrorColor"

            }else{
               $scope.flag4=false;
               $scope.c_price="SuccessColor"
            }

          if($scope.flag1!=true && $scope.flag2!=true && $scope.flag3!=true && $scope.flag4!=true){
            $scope.data[indexs].name=$scope.gai_name;
               $scope.data[indexs].num=parseInt($scope.gai_number);
               $scope.data[indexs].address=$scope.gai_address;
               $scope.data[indexs].price=$scope.gai_price;
              $scope.editisShow=false;
            }else{
               $(".error").css({" background-color":"#FEB6C1","font-size":"16px","color":"#93212E"});
            }

          }


      //发货状态
      $scope.changeOrderState=function(d){
          d.orderstate=true;
      }

   //购物车为空时隐藏表
   $scope.showContent=function(){
      if($scope.data.length>0){
          return false;
      }else{
          return true;
      }
   }
});

    /*function allCheckboxOne(){
                    var names = document.getElementsByName("checkbox");
                    var allcheckbox = document.getElementById("allcheckbox");
                    for(var i = 0; i<names.length; i++){
                //当全选勾被选中时，遍历names集合，让每一个勾都设为true
                        if(allcheckbox.checked== true){
                            names[i].checked = true;
                        }else{
                            names[i].checked = false;
                        }
                    }
                }

                /*根据单个复选框的选择情况确定全选复选框是否被选中*/
               /* function selectSingle(){
                    var k=0;
                    var oInput=document.getElementsByName("checkbox");
                    for (var i=0;i<oInput.length;i++){
                       if(oInput[i].checked==false){
                          k=1;
                          break;
                        }
                    }
                    if(k==0){
                        document.getElementById("allcheckbox").checked=true;
                    }
                    else{
                        document.getElementById("allcheckbox").checked=false;
                    }
                }     */
   </script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <div class="main">
           <table>
                 <tr>
                  <td><input type="text" ng-model="search" class="search" placeholder="请输入关键字搜索"/></td>
                  <td><input type="text" ng-model="address" class="search" placeholder="请输入关键字搜索"/></td>
                  <td width="200"></td>
                  <td>
                     <select ng-model="month_start">
                         <option value="">开始月份</option>
                         <option value="1">01</option>
                         <option value="2">02</option>
                         <option value="3">03</option>
                         <option value="4">04</option>
                         <option value="5">05</option>
                         <option value="6">06</option>
                         <option value="7">07</option>
                         <option value="8">08</option>
                         <option value="9">09</option>
                         <option value="10">10</option>
                         <option value="11">11</option>
                         <option value="12">12</option>
                     </select>
                  </td>
                  <td>
                     <select ng-model="month_end">
                         <option value="">结束月份</option>
                         <option value="1">01</option>
                         <option value="2">02</option>
                         <option value="3">03</option>
                         <option value="4">04</option>
                         <option value="5">05</option>
                         <option value="6">06</option>
                         <option value="7">07</option>
                         <option value="8">08</option>
                         <option value="9">09</option>
                         <option value="10">10</option>
                         <option value="11">11</option>
                         <option value="12">12</option>
                     </select>
                  </td>
                  <td>
                      <select ng-model="orderStateSel">
                            <option value="">选择状态</option>
                            <option value="true">已发货</option>
                            <option value="false">未发货</option>
                      </select>
                  </td>
                    <td>
                     <select ng-model="sel">
                         <option value="">排序</option>
                         <option value="num">按货物数量正序排序</option>
                          <option value="-num">按货物数量倒序排序</option>
                     </select>
                  </td>
                  <td width="40"></td>
                  <td><button id="button" ng-click="add()" >入库</button></td>
                 </tr>
           </table>
           <div align="right">
             <button ng-click="delselect()" id="btn1">批量删除</button></td>
              <button ng-click="clear()" id="btn2">清空购物车</button></td>
              </div>
           <table ng-hide="showContent()" class="table2" border="1" cellpadding="0" cellspacing="0">
                 <thead>
                  <tr style="background: darkgray;">
                  <th><input type="checkbox" ng-model="AllSelect" ng-click="AllSelectFun()" /></th>
                  <th>货物名称<button class="paixu" ng-click="dian('name')">排序</button></th>
                  <th>货物数量</th>
                  <th>货物产地</th>
                  <th>货物单价<button class="paixu" ng-click="dian('price')">排序</button></th>
                  <th>货物入库日期<button class="paixu" ng-click="dian('date')">排序</button></th>
                  <th>总价</th>
                  <th>操作</th>
                  <th>状态</th>
                  </tr>
                 </thead>
                 <tbody>
                  <tr ng-repeat="d in data | filter:{name:search,address:address,orderstate:orderStateSel} | filter: filterByMonth |orderBy:(order2+order1)| orderBy:sel">
                     <td align="center"><input type="checkbox" ng-model="d.state" ng-click="select()" /></td>
                     <td>{{d.name}}</td>
                     <td>
                      <button ng-click="less($index)">-</button>
                          <input type="number" class="num" ng-model="d.num" ng-change="change($index)"/>
                      <button ng-click="adds($index)">+</button></td>
                     <td>{{d.address}}</td>
                     <td>{{d.price.toFixed(2) | currency:"￥:"}}</td>
                     <td>{{d.date | date:"MM-dd hh:mm"}}</td>
                     <td>{{(d.price*d.num).toFixed(2)}}</td>
                     <td><button ng-click="del($index)">删除</button><button ng-click="updata($index)">修改</button></td>
                     <td>
                      <button disabled="disabled" style="background: green; border-style: none;" ng-show="d.orderstate">已发货</button>
                      <button style="background: yellow; border-style: none;" ng-show="!d.orderstate" ng-click="changeOrderState(d)">未发货</button>
                     </td>
                  </tr>
                  <tr>
                     <td colspan="9" align="right">
                      购买数量:<span>{{Allnum()}}</span>  
                           总价为:<span ng-bind="AlltotalPrice() | currency:'￥'"></span>
                     </td>
                  </tr>
                 </tbody>
           </table>
           <fieldset style="width: 400px; margin-left: 200px; margin-top: 20px; text-align: center;" ng-show="addisShow">
                 <legend>入库</legend>
                 <form>
                     货物名称<input type="text" ng-model="g_name" placeholder="4-20字符" ng-class="c_name"/><span class="error" ng-show="span1">货物名称必须6-20个字符</span><br/><br/>
                     货物数量<input type="text" ng-model="g_number" placeholder="货物数量必须为数字" ng-class="c_number"/><span class="error" ng-show="span2">货物数量必须为数字</span><br/><br/>
                           货物产地<input type="text" ng-model="g_address" placeholder="4-8个字符" ng-class="c_address"/><span class="error" ng-show="span3">货物产地必须6-8个字符</span></br/><br/>
                           货物单价<input type="text" ng-model="g_price" placeholder="请输入货物单价" ng-class="c_price"/><span class="error" ng-show="span4">单价必须为数字</span><br/><br/>
                    <button ng-click="insert()" style="text-align: center;">提交</button>
                 </form>
           </fieldset>
            <fieldset style="width: 400px; margin-left: 200px; margin-top: 20px; text-align: center;" ng-show="editisShow">
                 <legend>修改</legend>
                 <form>
                     货物名称<input type="text" ng-model="gai_name" placeholder="6-20字符" ng-class="c_name"/><span class="error" ng-show="span1">货物名称必须6-20个字符</span><br/><br/>
                     货物数量<input type="text" ng-model="gai_number" placeholder="请输入货物数量" ng-class="c_number"/><span class="error" ng-show="span2">货物数量必须为数字</span><br/><br/>
                     货物产地<input type="text" ng-model="gai_address" placeholder="6-8个字符" ng-class="c_address"/><span class="error" ng-show="span3">货物产地必须6-8个字符</span></br/><br/>
                           货物单价<input type="text" ng-model="gai_price" placeholder="请输入货物单价" ng-class="c_price"/><span class="error" ng-show="span4">单价必须为数字</span><br/><br/>
                    <button ng-click="gai()" style="text-align: center;">提交</button>
                 </form>
           </fieldset>

       <p ng-show="showContent()" align="center" style="margin-top: 30px;">您的购物车为空，<a href="https://world.taobao.com/">去逛商场</a></p>
       </div>
   </body>
</html>