前端_购物车_全选-加减数量-全部删除_前端数量加减-优快云博客

本文将详细介绍如何在前端实现购物车功能，包括全选商品、逐个商品数量的增加与减少，以及一键清空购物车的全部操作。通过这些功能，提升用户在电商平台的购物体验。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../angular-1.5.5/angular.min.js"></script>
    <style>
        table {
            border-collapse: collapse;
        }

        th, td {
            border: 2px solid black;
            padding: 15px;
        }
    </style>


    <script>
        var myapp = angular.module("myapp", []);
        myapp.controller("myCtrl", function ($scope) {
            $scope.data = [{
                "name": "小米6",
                "price": "2888",
                "count": "5"
            }, {
                "name": "华为",
                "price": "2999",
                "count": "6"
            }, {
                "name": "苹果",
                "price": "4888",
                "count": "3"
            }, {
                "name": "vivo",
                "price": "3288",
                "count": "2"
            }, {
                "name": "oppo",
                "price": "2588",
                "count": "7"
            }, {
                "name": "三星",
                "price": "3888",
                "count": "1"
            }];

            //删除
            $scope.del = function (index) {

                console.log(index);
                $scope.data.splice(index, 1);
            };
            //全选
            $scope.checkAll = false;
            $scope.check2 = function () {
                if ($scope.checkAll == 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 n = 0;
            $scope.count = function (index) {
                //console.log(index);
                if ($scope.data[index].check == true) {
                    n++;
                } else {
                    n--
                }
                console.log(n);
                if (n == $scope.data.length) {
                    $scope.checkAll = true;
                } else {
                    $scope.checkAll = false;
                }
            };
            //批量删除的方法
            $scope.delAll = function () {
                for (var i = 0; i < $scope.data.length; i++) {
                    if ($scope.data[i].check == true) {
                        $scope.data.splice(i, 1);
                        i--;
                    }
                }
            }
            //购物车
            $scope.reduce = function (index) {
                $scope.data[index].count--;
                if ($scope.data[index].count <= 0) $scope.data[index].count = 0;
            };
            $scope.add = function (index) {
                $scope.data[index].count++;
            };
            //总价
            $scope.sum = function () {
                var sum = 0;
                for (var i = 0; i < $scope.data.length; i++) {
                    sum += $scope.data[i].price * $scope.data[i].count;
                }
                return sum;
            }
            //总支付
            $scope.mony = function () {
                alert("确认支付？");
                $scope.loc = "www.baidu.com";
            }
        });
    </script>

</head>
<body ng-app="myapp" ng-controller="myCtrl">
<table>
    <thead>
    <tr>
        <th>序号</th>
        <th>全选<input type="checkbox" ng-model="checkAll" ng-click="check2()"></th>
        <th>品牌</th>
        <th>单价</th>
        <th>我的购物车</th>
        <th>小计</th>
        <th>删除
            <button ng-click="delAll()">全部删除</button>
        </th>
    </tr>
    </thead>

    <tr ng-repeat="item in data">
        <td>{{$index}}</td>
        <td><input type="checkbox" ng-model="item.check" ng-click="count($index)"></td>
        <td>{{item.name}}</td>
        <td>{{item.price}}</td>
        <td><span ng-click="reduce($index)">-</span>&nbsp;{{item.count}}&nbsp;<span ng-click="add($index)">+</span></td>
        <td>{{item.price*item.count}}</td>
        <td>
            <button ng-click="del($index)">删除</button>
        </td>
    </tr>
    <tbody>
    <tr>
        <td>
            总支付：<p>{{sum()|currency:"￥"}}</p>
        </td>
        <td>
            <button ng-click="mony()">确认支付</button>
        </td>
    </tr>
    </tbody>
</table>
</body>

</html>