H5购物车

麦片_
已于 2023-02-07 15:38:17 修改
阅读量1k
点赞数
文章标签： angular.js javascript 前端
于 2017-09-22 10:36:45 首次发布
本文链接：https://blog.csdn.net/zy233762/article/details/78060290
版权
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>0922</title>
        <style>
            h3{margin-right: 400px;}
            table, th , td  {
                          border: 1px solid grey;
                          border-collapse: collapse;
                          padding: 5px;
                        }
                        table tr:nth-child(odd) {
                          background-color: #f1f1f1;
                        }
                        table tr:nth-child(even) {
                          background-color: #ffffff;
                        }
             #mydiv{display:none}            
        </style>
        <script src="js/jquery-2.1.0.js"></script>
        <script src="js/angular-1.5.5/angular.js"></script>
        <script>
            var app  = angular.module("myapp",[]);
                app.controller("myctrl",function($scope){
                     //初始化数据
                     $scope.goods = [
                               {name:"qq",price:12.9,number:2,state:false},
                               {name:"wx",price:23.9,number:12,state:false},
                               {name:"fd",price:45.9,number:23,state:false},
                               {name:"asd",price:99.9,number:9,state:false}
                     ];
                    
                     //删除单个
                     $scope.dele = function(index){
                         //删除
                         $scope.goods.splice(index,1);
                         
                     };
                    
                     //数量减少有个
                     $scope.reduce = function(index){
                         
                          var num = $scope.goods[index].number;
                            
                          if($scope.goods[index].number > 1){
                              $scope.goods[index].number--;
                          }
                          else if($scope.goods[index].number == 1){
                              if(confirm("否删除该商品")){
                                  //如果数量小于1 删除 商品
                                  $scope.goods.splice(index,1);
                              }else{
                                  
                                  $scope.goods[index].number=num;
                              }
                         
                          }
                     };
                    
                     //数量增加一个
                     $scope.add = function(index){
                         
                              $scope.goods[index].number++;
                         
                     };
                    
                     //计算总价
                     $scope.allSum = function(){
                           var allPrice = 0;
                           var money;
                           for(var i=0; i < $scope.goods.length; i++){
                                 allPrice+= $scope.goods[i].price * $scope.goods[i].number;
                           }
                              money = "¥"+allPrice;
                              
                           return money;
                     };
                    
                     //全选 反选
                     $scope.selectAll=false;
                      $scope.all = function(m){
                          for(var i=0; i < $scope.goods.length; i++){
                                if(m == true){
                                     $scope.goods[i].state = true;
                                }
                                else{
                                    $scope.goods[i].state = false;
                                }
                           }
                     };
                    
                    
                     //批量删除
                     $scope.deleteSel = function(){
                         var userNames = [];
                    //遍历users数组，获取状态是选中的user对象的名字
                    for(index in $scope.goods){
                        if($scope.goods[index].state == true){
                            userNames.push($scope.goods[index].name);
                        }
                    }
                    
                    if(userNames.length>0){
                        if(confirm("是否删除选中项？")){
                            for(i in userNames){
                                var name = userNames[i];
                                for(i2 in $scope.goods){
                                    if($scope.goods[i2].name == name){
                                        $scope.goods.splice(i2,1);
                                    }
                                    if($scope.goods.length ==0 ){
                                        $(function(){
                                               $("table").hide();
                                               $("#mydiv").show();
                                          });
                                    }
                                }
                            }
                        }
                    }else{
                        alert("请选择删除项");
                    }
                    
                     };
                    
                     //删除全部
                     $scope.deleteall = function(){
                          $scope.goods.splice($scope.goods);
                          $(function(){
                               $("table").hide();
                               $("#mydiv").show();
                          });
                     };
                    
                    
                });
        </script>
        
        
    </head>
    <body ng-app="myapp" ng-controller="myctrl">
        <center>
             <h3>我的购物车</h3>
             <table border="1" cellpadding="10" cellspacing="0" align="center">
                 <tr align="center">
                     <td colspan="6">
                         <input type="button" ng-click="deleteall()" value="清空购物车"style=" background-color: #A94442; color: white; margin-left: 520px;"   />
                         <input type="button" ng-click="deleteSel()" value="批量删除"style=" background-color: #A94442; color: white; "   />
                     </td>
                 </tr>
                 <tr align="center">
                     <th>
                         <input type="checkbox" ng-model="selectAll" ng-click="all(selectAll)" />
                     </th>
                     <th>name</th>
                     <th>price</th>
                     <th>number</th>
                     <th>totalPrice</th>
                     <th>option</th>
                 </tr>
                 <tr ng-repeat="g in goods" align="center">
                     <td>
                         <input ng-model="g.state" type="checkbox"  ng-checked="selectAll" />
                     </td>
                     <td>{{g.name}}</td>
                     <td>{{g.price | currency:"¥" }}</td>
                     <td>
                         <input  type="button" value="-"
                                 style="background-color: #0000FF; color: white;"
                                 ng-click="reduce($index)"
                                 />
                         <input type="text" ng-model="g.number" style="width: 25px;" />
                         <input type="button" value="+"
                                style="background-color: #0000FF; color: white;"
                                ng-click="add($index)"
                             />
                     </td>
                     <td>{{g.number*g.price | currency:"¥" }}</td>
                     <td>
                         <input type="button" value="删除"
                                style="background-color: #0000FF; color: white;"
                                ng-click="dele($index)"
                                 />
                     </td>
                     
                 </tr>
                 <tr>
                     <td colspan="6">
                         总价为:<span ng-bind="allSum()"></span>
                     </td>
                 </tr>
             </table>
            
             <div id="mydiv">
                  您的购物车为空,<b style="color: #008080;">去逛商城</b>
             </div>
            
        </center>
    </body>
</html>