AngularJs购物车实现

最新推荐文章于 2019-08-05 04:26:52 发布

ITBestBai

最新推荐文章于 2019-08-05 04:26:52 发布

阅读量260

点赞数 1

本文链接：https://blog.csdn.net/qq_40015237/article/details/78060805

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/angular1.4.6.min.js"></script>
    <style>
        table, tr, td {
            border: 1px gray solid;
        }
        a{
            text-decoration: none;
        }
        button{
            background-color: darkblue;
            border-radius: 5px;
            color: white;
        }
    </style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table>
    <p style="font-weight: bold;font-size: 35px">我的购物车</p>
    <tr>
        <td colspan="6">
            <button ng-click="removeall()" style="background-color: red;float: right">清空购物车</button>
        </td>

    </tr>
    <tr>
        <td><input type="checkbox" ng-model="selectAll" ng-click="selectAllClick(selectAll)"></td>
        <td>name</td>
        <td>price</td>
        <td>number</td>
        <td>totalPrice</td>
        <td>option</td>
    </tr>
    <tr ng-repeat="shop in shoplist">
        <td><input type="checkbox" ng-checked="shop.checked"></td>
        <td>{{shop.name}}</td>
        <td>{{shop.price | currency:"¥:"}}</td>
        <td>
            <button ng-click="reduce($index)">-</button>
            <input type="text" ng-model="shop.number" ng-change="change($index)">
            <button ng-click="add($index)">+</button>

        </td>
        <td>{{shop.price*shop.number| currency:"¥:"}}</td>
        <td>
            <button ng-click="remove($index)">删除</button>
        </td>
    </tr>
    <tr>
        <td colspan="6">总价为:<span ng-bind="allsum() | currency:'¥:'"></span></td>
    </tr>
</table>
<script>
    var myApp = angular.module("myApp", []);
    myApp.controller("myCtrl", function ($scope) {
        $scope.shoplist = [
            {name: "qq", price: 12.90, number: 2, checked: false},
            {name: "wx", price: 23.90, number: 1, checked: false},
            {name: "qq1", price: 99.90, number: 3, checked: false},
            {name: "wx1", price: 30.90, number: 5, checked: false}
        ];

        //点击加号按钮商品数量加1
        $scope.add = function (index) {
            $scope.shoplist[index].number++;
        }
        //减少
        $scope.reduce = function (index) {
            $scope.shoplist[index].number--;
            if($scope.shoplist[index].number<1){
                if(confirm("是否删除此项")){
                    $scope.shoplist.splice(index,1);
                }else{
                    $scope.shoplist[index].number++;
                }
            }
        }
        
        //全选
        $scope.selectAllClick = function (sa) {
            for(var i = 0;i<$scope.shoplist.length;i++){
                $scope.shoplist[i].checked = sa;
            }
        }
        
        //删除全部
        $scope.removeall = function () {
            if($scope.selectAll){
                if(confirm("您是否将商品移除购物车")){
                    $scope.shoplist = [];
                    $("table").hide();
                    $("p").append("<br><span style='font-size: 20px'>您的购物车为空,<a href='https://www.tmall.com/?pid=mm_26632258_3504122_48284354&ali_trackid=2:mm_26632258_3504122_48284354:1506047435_215_2011144711&upsid=4f8f76fe6f4445594e973643f5a84e62&clk1=4f8f76fe6f4445594e973643f5a84e62'>去逛商场</a></span>");
                }

            }
        }
        //计算总价
        $scope.allsum = function () {
            var allPrice = 0;
            for(var i = 0;i<$scope.shoplist.length;i++){
                allPrice+=$scope.shoplist[i].number*$scope.shoplist[i].price;
            }
            return allPrice;
        }
        //输入数字改变数量
        $scope.change = function (index) {
            if($scope.shop.number>0){
                $scope.shoplist[index].number = $scope.shop.number;
            }else{
                alert("请输入大于0的数");
            }

        }
        //删除单个
        $scope.remove = function (index) {
            if(confirm("是否删除此项")){
                $scope.shoplist.splice(index,1);
            }

        }




    });
</script>
</body>
</html>