Angular购物车

<!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)">
<!--                <tr ng-repeat="user in goods|filter:serch|orderBy:title:desc" 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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值