购车模糊查询+排序+删除+修改

来源：互联网发布：js切换div内容编辑：程序博客网时间：2024/05/17 00:05

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   <script type="text/javascript" src="../angular/angular.js" ></script>
       <script type="text/javascript" src="../angular/angular-route.js" ></script>
       <script type="text/javascript">
           var app=angular.module("myApp",[]);
           app.controller("myCtrl",function($scope){
               /*声明数据对象，初始化商品信息，数据自拟且不低于四条*/
               $scope.search="";
               $scope.goods=[
                     { "id":80,
                      "name":"iphone",
                      "price":5400,
                       state:false
                     },
                     { "id":1200,
                      "name":"ipad mini",
                      "price":2200,
                       state:false
                     },
                     { "id":500,
                      "name":"ipad air",
                      "price":"2300",
                      state:false
                     },
                     { "id":29,
                     "name":"ipad",
                      "price":1420,
                      state:false
                     },
                     { "id":910,
                      "name":"imac",
                      "price":15400,
                      state:false
                     }
                  ];
                   //点击列明进行排序
                  $scope.orderFlag="";
                  $scope.orderLine="id";
                  $scope.orderDesc=function(line){
                   $scope.orderLine=line;
                   if ($scope.orderFlag=="")
                   {
                       $scope.orderFlag="-";
                   }else
                   {
                       $scope.orderFlag="";
                   }
                  }
                   //下拉菜单删选商品价格
                  $scope.goodsPrice="--请选择--";
                  $scope.ifShow=function(price){
                    if ($scope.goodsPrice=="--请选择--") {
                       return true;
                    }
                    else{
                       var arr=$scope.goodsPrice.split("-");
                       var priceMin=arr[0];
                       var priceMax=arr[1];
                       if (price<priceMin || price>priceMax)
                       {
                           //alert("111");
                           return false;
                       }
                       else{
                           return true;
                       }
                    }
                  }

                    //点击删除按钮，删除当前商品
               $scope.delGoods=function(delName){
                   //alert(delName);
                   for (index in $scope.goods)
                   {
                       //alert("删除前，角标为"+index+"长度为："+$scope.products.length);
                        if (delName==$scope.goods[index].name)
                        {
                           $scope.goods.splice(index,1);
                           //alert("删除后，角标为"+index+"长度为："+$scope.products.length);
                        } else{

                        }
                   }
               }

               //定义下拉菜单排序规则
               $scope.selOrder;
               $scope.orderSel=function(){
                   if ($scope.selOrder=="id")
                   {
                       $scope.orderFlag="";
                       $scope.orderLine="id";
                   }else if($scope.selOrder=="-id")
                   {
                       $scope.orderFlag="-";
                       $scope.orderLine="id";
                   }else if($scope.selOrder=="price")
                   {
                       $scope.orderFlag="";
                       $scope.orderLine="price";
                   }else if($scope.selOrder=="-price")
                   {
                       $scope.orderFlag="-";
                       $scope.orderLine="price";
                   };

               }

               //定义修改价格
               $scope.updateGoods=function(price){
                   //获得价格
                   for(index in $scope.goods)
                   {
                       if (price==$scope.goods[index].price)
                       {
                           //修改价格
                           var result=parseInt(window.prompt("请输入你要修改的价格",price));
                           //在这之前对result的结果进行非字符串判断
                           if (result<0)
                           {
                               alert("输入有误，请重新输入更改");
                           }else{
                               if (window.confirm("确定要将"+$scope.goods[index].name+"的价格更改为:"+result+"吗?"))
                               {
                                   $scope.goods[index].price=result;
                               }
                           }
                       }else{

                       }
                   }
               }

               //全选、全不选
               $scope.selectAll=false;
               $scope.selectAllFun=function(){
                   if ($scope.selectAll)
                   {
                       for(index in $scope.goods)
                       {
                           $scope.goods[index].state=true;
                       }
                   }else{
                       for(index in $scope.goods)
                       {
                           $scope.goods[index].state=false;
                       }
                   }
               }

               //反选
               $scope.checkSelectAll=function(){
                   var flag=false;
                   //遍历数组，获得对象的状态
                   for (index in $scope.goods)
                   {
                       if ($scope.goods[index].state)
                       {
                           flag=true;
                       }
                   }
                   //判断是否没有一个是未选中状态
                   if (flag)
                       {
                           //这是正面至少有一个未选中
                           $scope.selectAll=false;//全选状态为false
                       } else{
                           //一定是全部被选中
                           $scope.selectAll=true;//全选状态为true
                       }
               }

               //批量删除
               $scope.delSelect=function()
               {
                   //自己添加选中状态判断，就是有没有一个都没选中的情况。

                   //定义一个空数组，盛放状态是选中的对象
                   var isSelected=[];
                   //遍历数组，通过数组对象的状态，判断是否删除当前遍历的对象
                   for(index in $scope.goods)
                       {
                           //如果遍历的当前对象状态为true，则删除
                           if ($scope.goods[index].state)
                           {
                               //把当前选中的对象，一个个追加到isSelected数组中。
                               isSelected.push($scope.goods[index]);
                           }
                       }

                       for(index in isSelected)
                       {
                           var name=isSelected[index].name;
                           for (index2 in $scope.goods)
                           {
                               if (name=$scope.goods[index2].name)
                               {
                                   $scope.goods.splice(index2,1);
                               }
                           }
                       }
               }


           });



       </script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <center>
       <h3>购物车</h3>
       <input type="text" placeholder="产品名称" ng-model="search" />产品价格
           <select ng-model="goodsPrice">
           <option>--请选择--</option>
           <option>0-2000</option>
           <option>2001-3000</option>
            <option>3001-4000</option>
           <option>4001-5000</option>
           <option>5001-6000</option>
           <option>6001-7000</option>
           <option>7001-8000</option>
           <option>8001-无穷大</option>
       </select>
       <select ng-model="selOrder" ng-change="orderSel()">
           <option value="">排序方式</option>
           <option value="id">id正序</option>
           <option value="-id">id逆序</option>
            <option value="price">价格正序</option>
           <option value="-price">价格逆序</option>
       </select>
       <button ng-click="delSelect()">批量删除</button>
       <br /><br />
       <table border="1 solid #000;" cellspacing="0" cellpadding="10" >
               <tr>
                   <th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"></th>
                   <th ng-click="orderDesc('id')">产品编号</th>
                   <th ng-click="orderDesc('name')">产品名称</th>
                   <th ng-click="orderDesc('price')">产品价格</th>
                   <th>操作</td>
               </tr>
                   <tr ng-repeat="sp in goods | filter:{'name':search} | orderBy:(orderFlag+orderLine) " ng-if="ifShow(sp.price)">
                   
                    <td><input type="checkbox" ng-model="sp.state" ng-ciclk="checkSelectAll()"/></td>
                   <td>{{sp.id}}</td>
                   <td>{{sp.name}}</td>
                   
                   <td>{{sp.price|currency:"RMB:"}}
                   </td>
                   <td>
                   <button ng-click="delGoods(sp.name)">删除</button>
                   <button ng-click="updateGoods(sp.price)">修改</button>
                   </td>
               </tr>
           </table>
       </center>
   </body>
</html>

阅读全文

0 0