实现购物车结算功能：批量和全部删除，全选和反选，单价和总价，数量增减，页面隐藏和显示

本文链接：https://blog.youkuaiyun.com/IT666DHW/article/details/78331216

本文介绍了一个基于AngularJS实现的购物车案例，演示了如何利用AngularJS特性完成商品信息的展示与交互，包括商品数量增减、总价计算、批量及全部删除等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：

要求：技术要求（html+css+angularjs）

1. 完成页面布局，如图1.1（button按钮可以用普通按钮）

2.Ø声明数据对象，初始化商品信息，数据自拟且不低于四条

3. 用ng-repaet指令将对象遍历并渲染到页面中

4.Ø点击”+”按钮输入框中的数量加1，同时可以计算出商品小计和购物车总价。同理，当点击”-”按钮时输入框中的数量减1，商品小计和购物车总价都会改变。在输入框中手动输入数量值，商品小计和购物车总价动态改变。

5. 使用AngularJS的过滤器在商品价格、商品小计、购物车总价前加”￥：”。

6. 当商品数量为1，用户点击”-”操作时，弹出对话框，询问用户是否删除该商品。如图1.2 当用户点击”确认”时删除该条商品信息，当用户点击”取消”时商品恢复原来数量。

7. 用户点击第一个checkbox代表全选，全选商品后点击删除选中商品，选中商品被删除，若购物车商品被全部删除后，展示如图1.3

效果图：

图1.1

图1.2

图1.3

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现购物车结算功能：批量/全部删除，全选/反选，单价/总价，数量增减，页面隐藏/显示</title>
    <style type="text/css">
       .mouse_color{
           background-color: #cccccc;
       }
        .num{
            width: 50px;
        }
        a{
            text-decoration: none;
        }
       #btn1,#btn2{
            color:white;
            width: 100px;
            float: right;
            border: solid red;
            margin-right: 88px;
            background-color: #ff3b30;
        }
    </style>
    <script src="../js/jquery-2.1.0.js"></script>
    <script src="../js/angular.js"></script>
    <script type="text/javascript">
        $(function () {
            // 鼠标移到行的颜色:光标在表格上移动，当前行变色；( mousemove或mouseover )
            $("#tab tr").mouseover(function () {
                $(this).addClass("mouse_color");
            });
            // 鼠标移出行的颜色:离开当前行，颜色恢复
            $("#tab tr").mouseout(function () {
                $(this).removeClass("mouse_color");
            });
        });
    </script>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function ($scope) {
            //1. 声明数据对象，初始化商品信息，数据自拟且不低于四条
            $scope.Products = [
                {name:"qq",price:12.90,number:1,totalPrice:12.90,state:false},
                {name:"wx",price:23.90,number:1,totalPrice:23.90,state:false},
                {name:"cn",price:99.90,number:1,totalPrice:99.90,state:false},
                {name:"us",price:2.90,number:1,totalPrice:2.90,state:false},
                {name:"jp",price:0.90,number:1,totalPrice:0.90,state:false}
            ];

            //2. 减少数量函数
            $scope.less = function (index) {
                if($scope.Products[index].number > 1){
                    $scope.Products[index].number--;
                }else {
                    //跳转到删除按钮事件处
                    $scope.remove(index);
                }
            }
            //3. 添加数量函数
            $scope.add = function (index) {
                $scope.Products[index].number++;
            }

            //4. 所有商品总价函数
            $scope.AlltotalPrice = function () {
                var allPrice = 0;
                for(var i = 0;i<$scope.Products.length;i++){
                    allPrice +=  $scope.Products[i].number * $scope.Products[i].price;
                    allPrice.toFixed(2);        //保留两位小数
                }
                return allPrice.toFixed(2);;
            }

            //5. 输入框输入负数或其它除数字外的内容时，输入框内容要变为1
            $scope.change = function (index) {
                if($scope.Products[index].number >= 1){
                }else {
                    $scope.Products[index].number = 1;
                }
            }

            //6.购买总数量函数
            $scope.numAll = function () {
                var numAlls = 0;
                for(var i = 0;i<$scope.Products.length;i++){
                    numAlls += $scope.Products[i].number;
                }
                return numAlls;
            }

            //7. 点击删除按钮操作，弹出对话框，询问用户是否删除该商品。
            $scope.remove = function (index) {
                if(confirm("您是否要将该商品移除购物车？")){
                    $scope.Products.splice(index,1);
                }
            }

            //8.点击 清空购物车 按钮，清空商品信息
            $scope.clear = function () {
                if(confirm("您是否准备清空购物车？")){
                    $scope.Products = [];
                }
            }

            //9. 点击批量删除按钮的函数：用户没有选中任意复选框时点击批量删除按钮提示用户先进行选中要删除的商品信息
            $scope.delSelect = function () {
                var ProductsNames = [];  //定义空数组，保存选中项的name
                //根据下标遍历数据源，把选中项的名字添加到数组中。
                for(index in $scope.Products){
                    //判断选项是否为选中的的状态？
                    if($scope.Products[index].state == true){
                        ProductsNames.push($scope.Products[index].name);
                    }
                }

                //遍历含有选中项name属性的数组。有多少个被选中，数据源就会被遍历多少遍。
                if(ProductsNames.length >0 ){
                    if(confirm("您是否要将选择的商品移除购物车？")){
                        for(i in ProductsNames){
                            var name = ProductsNames[i];
                            //对比选中项的名字在数组中的角标，根据角标删除当前对象，删一个数据源少一个。
                            for(y in $scope.Products){
                                if (name == $scope.Products[y].name){
                                    $scope.Products.splice(y,1);
                                }
                            }
                        }
                    }
                }else {
                    alert("请先选择要移除的商品项");
                }
            }

            //10. 全选复选按钮 的点击事件
            $scope.selectAll = false;
            $scope.selectAllFun = function () {
                //如果全选按钮为true时，就把数组的state状态变为true
                if($scope.selectAll){
                    for(index in $scope.Products){
                        $scope.Products[index].state = true;
                    }
                }else {
                    for(index in $scope.Products){
                        $scope.Products[index].state = false;
                    }
                }

            }
            //单个复选框按钮的点击事件：根据点击的单个复选框按钮的下标的state 检测内容是否全选
            $scope.checkSelect = function (index) {
                var temp = 0;
                if($scope.Products[index].state == true){
                    temp++;
                }else {
                    temp--;
                }

                //定义的变量大小等于数组的长度，代表内容全选，表示全选按钮为true
                if(temp == $scope.Products.length  ){
                    $scope.selectAll = true;
                }else {
                    $scope.selectAll = false;
                }

                //定义标志位checkState，默认为false
                var checkState = false;
                for(i in $scope.Products){
                    if($scope.Products[i].state == true){
                    }else {
                        //数据源中的标志位变量state不是全部等于true时，标志位checkState才为true
                        checkState = true;
                    }
                }
                if(checkState){
                    //标志位checkState为true时，全选按钮就为false
                    $scope.selectAll = false;
                }else {
                    $scope.selectAll = true;
                }
            }

            //11. 判断数据源的长度：长度为0时，即购物车为空，页面就提示：您的购物车为空，去逛商场
            $scope.showContent = function () {
                if($scope.Products.length > 0){
                    return false;
                }else {
                    return true;
                }
            }
        });
    </script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<h2>我的购物车</h2>
<hr style="size: 1px;background-color: #F5F5F5;width: 100%;">   <br>
    <button ng-click="delSelect()" id="btn1" > 批量删除 </button>
    <button ng-click="clear()" id="btn2" > 清空购物车 </button>   <br><br>

<center>
    <table id="tab" ng-hide="showContent()" border="1 solid #F5F5F5;" cellspacing="0" cellpadding="1" width="888" height="333">
        <thead>
            <tr align="left">
                <!--    全选复选按钮    -->
                <th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"></th>
                <th>name</th>
                <th>price</th>
                <th>number</th>
                <th>totalPrice</th>
                <th>option</th>
            </tr>
        </thead>
        <tbody>
            <!--    用ng-repaet指令将对象遍历并渲染到页面中    -->
            <!--    使用AngularJS的过滤器在商品价格、商品小计、购物车总价前加”￥：”   -->
            <tr ng-repeat="goods in Products">
                <!--    单个 复选按钮    -->
                <th align="left"><input type="checkbox" ng-model="goods.state"  ng-click="checkSelect($index)"></th>
                <td>{{goods.name}}</td>
                <td>￥:{{goods.price.toFixed(2)}}</td>
                <td>
                    <!--    点击”+”按钮输入框中的数量加1，同时可以计算出商品小计和购物车总价。 -->
                    <button ng-click="less($index)" style="background-color: #007aff;color: white;border: solid #007aff;">-</button>

                    <input type="text" class="num" ng-model="goods.number" ng-change="change($index)">

                    <!--    当点击”-”按钮时输入框中的数量减1，商品小计和购物车总价都会改变。  -->
                    <button ng-click="add($index)" style="background-color: #007aff;color: white;border: solid #007aff;">+</button> </td>
                </td>
                <td>￥:{{(goods.price * goods.number).toFixed(2)}}</td>
                <td><button ng-click="remove($index)" style="background-color: #007aff;color: white;border: solid #007aff;">删除</button></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="6">
                    购买数量：<span>{{numAll()}}</span> &nbsp;&nbsp;
                    <!--    显示￥符号也可以直接使用  ￥  如<td colspan="6">总价为：￥:<span ng-bind="AlltotalPrice()"></span></td>    -->
                    总价为：<span ng-bind="AlltotalPrice() | currency:'￥'"></span>
                </td>
            </tr>
        </tfoot>
    </table>

    <!--    购物车为空时选择显示的内容   -->
    <p ng-show="showContent()">您的购物车为空，<a href="https://world.taobao.com/">去逛商场</a></p>
</center>
</body>
</html>