Angular，js实现简单购物车功能

最新推荐文章于 2023-06-30 11:11:40 发布

小黑子爱敲代码

最新推荐文章于 2023-06-30 11:11:40 发布

阅读量408

点赞数

CC 4.0 BY-SA版权

分类专栏： Android开发文章标签： angular javascript

本文链接：https://blog.youkuaiyun.com/Cyq_0927/article/details/78611946

Android开发专栏收录该内容

52 篇文章

订阅专栏

本文介绍了一个简单的购物车功能实现方案，使用AngularJS框架进行数据绑定和处理。通过定义商品数组并利用AngularJS指令如ng-repeat来展示商品信息，同时实现了添加和删除商品的功能，并实时更新购物车总金额。

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

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>实现简单购物车功能</title>
        <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
    </head>

    <body ng-app="myApp" ng-controller="myCtrl">

        <h3>您的购物车</h3>

        <table border="1px" cellspacing="0px" cellpadding="0px" class="t">
            <tr>
                <td>商品名</td>
                <td>数量</td>
                <td>单价</td>
                <td>小计</td>
            </tr>
            <tr ng-repeat="good in goods">
                <td>{{good.name}}</td>
                <td>{{good.count}}</td>
                <td>{{good.price|currency:"RMB￥"}}</td>
                <td>{{good.count*good.price|currency:"RMB￥"}}<input type="button" value="删除" ng-click="dele($index)" /><input type="button" value="添加" ng-click="add($index)" /></td>
            </tr>
        </table>
        <div class="sum">
            总金额：{{sum}}
        </div>

        <!--
            js里面
            1.定义数组
            2.实现删除
        -->
        <script type="text/javascript">
            var mo = angular.module("myApp", []);
            mo.controller("myCtrl", function($scope) {
                //定义一个数组
                $scope.goods = [{
                    "name": "鼠标",
                    "count": "1",
                    "price": "15"
                }, {
                    "name": "键盘",
                    "count": "3",
                    "price": "40"
                }, {
                    "name": "耳机",
                    "count": "1",
                    "price": "100"
                }];

                //显示总金额
                var sum1 = 0;
                for (var i = 0; i < $scope.goods.length; i++) {
                    sum1 += $scope.goods[i].count * $scope.goods[i].price;
                }
                //赋值个总金额
                $scope.sum = sum1;

                //删除
                $scope.dele = function($index) {
                    //                  alert($index);
                    $scope.goods.splice($index, 1);
                    //删除完毕，将总金额再计算一遍
                    var sum1 = 0;
                    for (var i = 0; i < $scope.goods.length; i++) {
                        sum1 += $scope.goods[i].count * $scope.goods[i].price;
                    }
                    //赋值个总金额
                    $scope.sum = sum1;
                    //提示
                    if ($scope.goods.length == 0) {
                        alert("购物车空了");
                    }
                }

                //添加
                $scope.add = function($index){
                    $scope.goods[$index].count++;

                    var sum1 = 0;
                    for (var i = 0; i < $scope.goods.length; i++) {
                        sum1 += $scope.goods[i].count * $scope.goods[i].price;
                    }
                    //赋值个总金额
                    $scope.sum = sum1;
                }
            });
        </script>
    </body>

</html>

效果图

购物车