AngularsJs购物车实现表头排序和下拉菜单排序同时进行

来源：互联网发布：adobe xd for mac下载编辑：程序博客网时间：2024/05/21 06:50

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="../agulajs/angular.js" ></script>
       <script>
           var app=angular.module("myApp",[]);
           app.controller("myCtrl",function($scope){
               $scope.goods=[{
                             id:290,
                             name:"ipad",
                             price:1420,
                             state: false

                         },{
                            id:80,
                             name:"iphone",
                             price:5400,
                             state: false
                         },{
                            id:910,
                             name:"imac",
                             price:15400,
                             state: false
                         },{
                            id:500,
                             name:"ipad air",
                             price:2340,
                             state: false
                         }];

                  /*//点击表头对其进行正逆排序
                    $scope.toog=function(tit){
                   $scope.title=tit;
                   $scope.desc=!$scope.desc;
                  }*/

                  //点击列明进行排序
               $scope.orderFlag = "";
               $scope.orderLine = "id";
               $scope.toog = function(line) {
                   $scope.orderLine = line;
                   if($scope.orderFlag == "") {
                       $scope.orderFlag = "-";
                   } else {
                       $scope.orderFlag = "";
                   }
               }

                  //根据index进行删除
                  $scope.delte=function(delName){
                   for(index in $scope.goods){
                   if(delName == $scope.goods[index].name){
                       if(confirm("确认要删除吗")){

                       $scope.goods.splice(index,1)

                       }
                   }else{
                       }
                   }
               }

           //下拉菜单筛选选中商品价格
           $scope.produce="--请选择--";
           $scope.isifshow=function(price){
               if($scope.produce=="--请选择--"){
                   return true;
               }else{
                   var arr=$scope.produce.split("-");
                   var priceMin = arr[0];
                   var priceMax = arr[1];
                   if(price<priceMin || price>priceMax){
                       return false;
                   }else{
                       return true;
                   }
               }
           }

            //定义下拉菜单排序规则
            $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.update=function(price){
              //获得价格
              for(index in $scope.goods){
                 if(price==$scope.goods[index].price){
                 var result=parseInt(window.prompt("请输入要修改的价格",price));

                 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.checkselectAllfun=function(){
          var flag=false;
          //遍历数组，获得对象的状态
          for(index in $scope.goods){
          //alert($scope.products[index].state)
           //如果有一个对象状态是false即未选中状态，就把标志位flag变为true。
          if(!$scope.goods[index].state){
             flag=true;
             }
          }
          //判断是否没有一个是未选中状态
          if(flag){//这是正面至少有一个未选中
              $scope.selectAll=false;//全选状态为false

          }else{
              $scope.selectAll=true;//全选状态为true
          }
       }

       //批量删除
       $scope.delselect=function(){


           //定义一个空数组，存放状态是选中的对象
           var isChected=[];
           //遍历数组，通过数组对象的状态，判断是否删除当前遍历对象
           for(index in $scope.goods){
              //如果遍历的当前对象状态为true ，则删除
              if($scope.goods[index].state){
                  //把当前选中的对象，一个个追加到isChected数组中
                  isChected.push($scope.goods[index]);
                  }
            }
           //遍历isSelected数组，因为isSelected数组中存放的是所有选中项的对象。
           for(index in isChected){
               var name=isChected[index].name;
               for(index2 in $scope.goods){
                  if(name==$scope.goods[index2].name){
                      //alert(Window.confirm("确定要全部删除吗？？"))

                      if(confirm("确定要全部删除吗？？")){

                         //$scope.goods.splice(index2,1)
                         $scope.goods=[];
                         }
                      }
               }
           }
       }
           });
       </script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <center>
       <h3>购物车</h3>
       <div>
           <input type="text" placeholder="产品名称" ng-model="serch" style="width: 80px;"/>
           产品价格<select ng-model="produce">
               <option>--请选择--</option>
               <option>0-1000</option>
               <option>1001-2000</option>
               <option>2001-3000</option>
               <option>3001-4000</option>
               <option>4001-5000</option>
               <option>5001-6000</option>
               <option>6001-无穷大</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>
       </div>
       <table border="1" cellpadding="10" cellspacing="0">
           <thead>
               <tr>
                   <td><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"></td>
                   <td ng-click="toog('id')">产品编号</td>
                   <td ng-click="toog('name')">产品名称</td>
                   <td ng-click="toog('price')">产品价格</td>
                   <td>操作</td>
               </tr>
           </thead>
           <tbody>
               <tr ng-repeat="user in goods|filter:serch|orderBy:(orderFlag+orderLine)" ng-if="isifshow(user.price)">

                    <td><input type="checkbox" ng-model="user.state" ng-click="checkselectAllfun()"></td>
                   <td>{{user.id}}</td>
                   <td>{{user.name}}</td>
                   <td>{{user.price}}</td>
                   <td>
                       <button ng-click="delte(user.name)">删除</button>
                       <button ng-click="update(user.price)">修改</button>
                   </td>
               </tr>
           </tbody>
       </table>
       </center>
   </body>
</html>

阅读全文

0 0