angularJs 购物车

最新推荐文章于 2024-09-01 07:02:17 发布
余生I
最新推荐文章于 2024-09-01 07:02:17 发布
阅读量267
点赞数
分类专栏： angularJS
本文链接：https://blog.csdn.net/qq_39357892/article/details/78082220
版权
angularJS 专栏收录该内容
6 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <style>
        /*css样式*/
        *{
            margin: 0;
            padding: 0;
        }
        body{
            margin: 10px auto;
            text-align: center;
        }
        table{
            margin: 10px auto;
            text-align: center;
            border-collapse: collapse;
            width: 600px;
        }
        tr{
            height: 30px;
            line-height: 30px;
        }
        tr td,th{
            border: 1px solid #000;
        }
        input{
            width: 30px;
        }
        .cl{
            width: 80px;
            height: 25px;
            background: red;
            color: white;
            border: 1px solid red;
            border-radius: 3px;
        }
        .jj{
            width: 20px;
            height: 20px;
            background: dodgerblue;
            border-radius: 3px;
            color: white;
            border: 1px solid dodgerblue;
        }
        .rem{
            background: dodgerblue;
            border-radius: 3px;
            color: white;
            border: 1px solid dodgerblue;
            width: 50px;
            height: 25px;
        }
    </style>
    <script src="agl/angular.min.js"></script>
    <!--引用angular-->
    <script>
        var app=angular.module("mapp",[]);
        app.controller("crtl",function ($scope) {
            $scope.arr=[{
                state:false,name:"QQ",price:12.9,number:2
            },{
                state:false,name:"wx",price:23.9,number:1
            },{
                state:false,name:"fQ",price:99.9,number:1
            }]
            $scope.sp=function (index) {

                if($scope.arr[index].number==1)
                {
                    var is=confirm("您是否将该商品移除购物车？");
                    if(is){
                        $scope.arr.splice(index,1);
                    }
                }else {
                    $scope.arr[index].number--;
                }
            }
            $scope.add=function (index) {
                $scope.arr[index].number++;
            }
            /*移除单个*/
            $scope.remove=function (index) {
                if($scope.arr[index].state==true)
                {
                    var is=confirm("您是否将该商品移除购物车？");
                    if(is){
                        $scope.arr.splice(index,1);
                        if($scope.arr.length==0)
                        {
                            $scope.f=false;
                            $scope.f2=true;
                        }else {
                            $scope.f=true;
                            $scope.f2=false;
                        }
                    }
                }else {
                    alert("请选中");
                }

            }
            /*全选*/
            $scope.all=false;
            $scope.check=function () {
                for (var i=0;i<$scope.arr.length;i++)
                {
                    if($scope.all==true)
                    {
                        $scope.arr[i].state=true;
                    }else {
                        $scope.arr[i].state=false;
                    }
                }
            }
            /*单选*/
            $scope.dan=function () {
                var ff=0;
                for (var i=0;i<$scope.arr.length;i++)
                {
                    if($scope.arr[i].state==true)
                    {
                        ff++;
                    }
                }
                if(ff==$scope.arr.length)
                {
                    $scope.all=true;
                }else {
                    $scope.all=false;
                }
            }
            /*计算总价*/
            $scope.allsum=function () {
                var sum=0;
                for (var i=0;i<$scope.arr.length;i++)
                {
                    sum+=$scope.arr[i].price*$scope.arr[i].number;
                }
                return sum;
            }
            /*清空购物车*/
            $scope.f=true;
            $scope.f2=false;
            $scope.clear=function () {
                var quan=false;
                for (var i=0;i<$scope.arr.length;i++)
                {
                    if ($scope.arr[i].state==true)
                    {
                        quan=true;
                    }else {
                        quan=false;
                    }
                }
                if(quan)
                {
                    $scope.arr=[];
                }else {
                    alert("请选中");
                }
                if($scope.arr.length==0)
                {
                    $scope.f=false;
                    $scope.f2=true;
                }else {
                    $scope.f=true;
                    $scope.f2=false;
                }
            }
        })
    </script>
</head>
<body ng-app="mapp" ng-controller="crtl">
<h2>我的购物车</h2>
<p ng-show="f2">您的购物车为空，<a href="#">去逛商场</a></p>
<table ng-show="f">
    <tr>
        <td class="thead"><button ng-click="clear()" class="cl">清空购物车</button></td>
    </tr>
    <tr>
        <th><input type="checkbox" ng-click="check()" ng-model="all"></th>
        <th>name</th>
        <th>price</th>
        <th>number</th>
        <th>totalprice</th>
        <th>option</th>
    </tr>
    <tr ng-repeat="item in arr">
        <!--遍历-->
        <td><input type="checkbox" ng-model="item.state" ng-click="dan()"></td>
        <td>{{item.name}}</td>
        <td>{{item.price | currency:"￥"}}</td>
        <td><button ng-click="sp($index)" class="jj">-</button><input type="text" ng-model="item.number"><button ng-click="add($index)" class="jj">+</button></td>
        <td>{{item.price*item.number| currency:"￥"}}</td>
        <td><button class="rem" ng-click="remove($index)">删除</button></td>
    </tr>
    <tr>
        <td class="tfoot"><p>总价为：</p><span>{{allsum()| currency:'￥'}}</span></td>
    </tr>
</table>
</body>
</html>