购物车,清空购物车,添加数量,结算总价,总数量,全选,

最新推荐文章于 2021-02-23 18:11:09 发布
xsw73692
最新推荐文章于 2021-02-23 18:11:09 发布
阅读量2.3k
点赞数
本文链接：https://blog.csdn.net/Rbh73692/article/details/78336861
版权
<!DOCTYPE html>
<html >
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <style>
        .s{
           text-decoration: none;
        }
        table{
            border-collapse: collapse;

        }
        table tr:nth-child(even){
            background-color: gainsboro;
        }
    </style>
    <script type="text/javascript">
        var app = angular.module("m",[]);
        app.controller("myc",function($scope){
            $scope.div2=true;
            $scope.div1=false;
            $scope.data = [
                {
                    name:"qq",
                    price:"12.90",
                    number:1
                },
                {
                    name:"ww",
                    price:"23.50",
                    number:3
                },
                {
                    name:"we",
                    price:"99.90",
                    number:2
                },
                {
                    name:"vc",
                    price:"99.90",
                    number:2
                }
            ];
//            {  wht  dm  }
//            //正着全选
//            var a = 0;
//            $scope.cheall = function(){
//                //判断当前是选中还是取消选中
//                if($scope.che==true){
//                    //遍历数组,都选中
//                    for(var i=0;i<$scope.data.length;i++){
//                        $scope.data[i].check = true;
//                        a++;
//                    }
//                }else{
//                    for(var i=0;i<$scope.data.length;i++){
//                        $scope.data[i].check = false;
//                        a--;
//                    }
//                }
//            };
//
//            //反着全选,,传参 ,当前 index,下标
//            $scope.chepl = function(index){
//                //如果当前选中了小按钮
//                if($scope.data[index].check==true){
//                    a++;
//                }else{
//                    //如果当前没选中,a--
//                    a--;
//                }
//                //判断a 是否等于数组长度
//                if(a==$scope.data.length){
//                    //全部选中了就 让大的全选按钮选中
//                    $scope.che = true;
//                }else{
//                    $scope.che = false;
//                }
//            }
//
//            //删除选中商品的点击事件
//            $scope.qk = function(){
//                //判断a的长度
//                if(a==0){
//                    alert("请选择要删除的商品");
//                }else{
//                    for(var i=0;i<$scope.data.length;i++){
//                        if($scope.data[i].state==true){
//                            //遍历过程中如果当前选中了,就删除掉
//                            $scope.data.splice(i,1);
//                            //删除了当前的这一条 可能下标越界.所以i--
//                            i--;
//                            a--;
//                        }
//                    }
//
//                    //删除完之后,全选按钮变成没有选中
//                    $scope.cheall = false;
//
//                    if($scope.data.length==0){
//                        //如果数组没数据了,,就隐藏div
//                        $scope.div1 = true;
//                        $scope.div2 = false;
//                    }
//                }
//            }


            //全选
            $scope.che=false;
            $scope.cheall=function(){
                if($scope.che==true){
                    for(var i=0;i<$scope.data.length;i++){
                        $scope.data[i].check=true;
                    }
                }else{
                    for(var i=0;i<$scope.data.length;i++){
                        $scope.data[i].check=false;
                    }
                }
            }
            //反选
            var a=0;
            $scope.chepl=function(index){
                if($scope.data[index].check==true){
                    a++;
                }else{
                    a--;
                }
                console.log($scope.data.length);
                if(a==$scope.data.length){
                    $scope.che=true;
                }else{
                    $scope.che=false;
                }
            }
            //每一行的删除的点击事件
            $scope.del=function(index){
                $scope.data.splice(index,1);
                if($scope.data.length==0){
                    //如果数组没数据了,,就隐藏div
                    $scope.div2=false;
                    $scope.div1=true;
                }
            }
            //全部删除
            $scope.qk=function(){
                $scope.data=[];
                $scope.che=false;
                //如果数组没数据了,,就隐藏div
                $scope.div2=false;
                $scope.div1=true;
            }
            //加号按钮的点击事件
            $scope.jia = function(index){
                //点击加号,,对应当前行的number数量加1
                $scope.data[index].number++;
            }
            //减号按钮的点击事件
            $scope.jian = function(index){
                if($scope.data[index].number==1){
                    //如果已经数量为1了 ,不能再减去,,询问是否删除
                    var queren = confirm("是否删除该商品?");
                    if(queren){
                        //当用户点击”确认”时删除该条商品信息
                        $scope.data.splice(index,1);
                        if($scope.data.length==0){
                            //如果数组没数据了,,就隐藏div
                            $scope.div2=false;
                            $scope.div1=true;
                        }
                    }
                }else{
                    //点击减号,,对应的 数量减1
                    $scope.data[index].number--;
                }
            }
            //计算总价的方式
            $scope.zongjia=function(){
                var zj=0;//总价默认是0
                angular.forEach($scope.data,function(item,key){
                    zj += item.number * item.price;

                });
                //将计算好的总价返回
                return zj;
            }

            $scope.zongliang=function(){
                var zl=0;
                angular.forEach($scope.data,function(item,key){
                    zl += item.number;
                });
                return zl;
            }


        });



    </script>
</head>
<body ng-app="m" ng-controller="myc">
    <div ng-show="div1">您的购物车为空,<a class="s" href="#" >去逛商场</a> </div>
    <div ng-show="div2">
        <table border="1" align="center" width="600px">
            <tr align="center">
                <td colspan="6">
                    <button style="float: right; border-collapse: collapse;
                            background-color: #880000;color: #f5f5f5" ng-click="qk()">清空购物车</button>
                </td>
            </tr>
            <tr align="center">
                <td><input type="checkbox" ng-model="che"  ng-click="cheall()"></td>
                <td>name</td>
                <td>price</td>
                <td>number</td>
                <td>totalprice</td>
                <td>option</td>
            </tr>
            <tr ng-repeat="item in data" align="center">
                <td><input type="checkbox" ng-model="item.check" ng-click="chepl($index)"></td>
                <td>{{item.name}}</td>
                <td>{{item.price | currency:"￥"}}</td>
                <td>
                    <button ng-click="jian($index)" style="background-color: #007aff;border: 0">-</button>
                    <input type="number" ng-model="item.number">
                    <button ng-click="jia($index)" style="background-color: #007aff;border: 0">+</button>
                </td>


                <td>{{item.price*item.number | currency:"￥"}}</td>
                <td><button style="border:0 ; background-color: #007aff" ng-click="del($index)"> 删除</button></td>
            </tr>
            <tr  align="center">
                <td colspan="6">
                    总价为:{{zongjia()| currency:"￥"}}<span style="margin-left: 150px">总数量为:{{zongliang()}}</span>
                </td>
            </tr>
        </table>

     </div>
</body>
</html>