angular实现一个购物车

你的美，让我痴迷

于 2021-10-20 08:41:54 发布

阅读量247

点赞数

分类专栏： angular.js 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45932157/article/details/120858736

版权

angular.js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../vendor/bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>

<script src="../vendor/angular/angular.js"></script>
<script src="app/index.js"></script>

<body ng-app="myapp">
    <div id="container" ng-controller="cartController">
        <table class="table  table-hover" ng-show="cart.length">
            <thead>
                <th>产品编号</th>
                <th>产品名字</th>
                <th>购买数量</th>
                <th>产品单价</th>
                <th>产品总价</th>
                <th>操作</th>
            </thead>
            <tbody>
                <tr ng-repeat="item in  cart">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>
                        <button type="button" ng-click="redue(item.id)" class="btn btn-info">-</button>
                        <input type="number" value="{{item.quantity}}" ng-model="item.quantity">
                        <button type="button" ng-click="add(item.id)" class="btn btn-info">+</button>
                    </td>

                    <td>{{item.price}}</td>
                    <td>{{item.quantity*item.price}}</td>
                    <td>
                        <button type="button" ng-click="remove(item.id)" class="btn btn-danger">移除</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        总数：
                    </td>
                    <td>{{totalPrice()}}</td>
                    <td>总购买数：</td>
                    <td>{{totalQuantity()}}</td>
                    <td colspan="2" style="text-align: left">
                        <button type="button" ng-click="cart={}" class="btn btn-danger">清空购物车</button></td>

                </tr>
            </tbody>
        </table>
        <p ng-show="!cart.length">你的购物车为空！</p>
    </div>

</body>

</html>

js:

var app = angular.module("myapp", []);
app.controller("cartController", function($scope) {
    $scope.cart = [{
                id: 1000,
                name: "iphone5s",
                quantity: 3,
                price: 4300
            },
            {
                id: 3300,
                name: "iphone5",
                quantity: 43,
                price: 3300
            },
            {
                id: 232,
                name: "imac",
                quantity: 56,
                price: 23000
            },
            {
                id: 1002,
                name: "ipad",
                quantity: 65,
                price: 6900
            }
        ]
        // 计算购物车总价
    $scope.totalPrice = function() {
        var total = 0;
        // $scope.cart.forEach(item => {
        //     total += item.price * item.quantity;
        // });
        angular.forEach($scope.cart, item => {
            total += item.price * item.quantity;
        });

        return total;
    }

    // 计算总购买数
    $scope.totalQuantity = function() {
        var total = 0;
        angular.forEach($scope.cart, item => {
            total += item.quantity;
        })

        return total;
    }

    //添加一个数量
    $scope.add = function(id) {
            var index = findIndex(id);
            if (index != -1) {
                ++$scope.cart[index].quantity;
            }

        }
        //减去一个数量
    $scope.redue = function(id) {
        var index = findIndex(id);
        if (index != -1) {
            var item = $scope.cart[index];
            if (item.quantity > 1) {
                --item.quantity;
            } else {
                var returnkey = confirm("从购物车内删除该产品？");
                if (returnkey) {
                    $scope.remove(id);
                }
            }

        }
    }


    //找到一个索引
    var findIndex = function(id) {
        var index = -1;
        angular.forEach($scope.cart, function(item, key) {
            if (item.id === id) {
                index = key
            }

        })

        return index;
    }


    //删除事件
    $scope.remove = function(id) {
        var index = findIndex(id);
        if (index !== -1) {
            $scope.cart.splice(index, 1);
        }
    }


    ///监听数据

    $scope.$watch('cart', function(newValues, oldValues) {
        console.log(newValues);
        angular.forEach($scope.cart, (item, key) => {
            if (item.quantity < 1) {
                var returnkey = confirm("从购物车内删除该产品？");
                if (returnkey) {
                    $scope.remove(item.id);
                } else {
                    item.quantity = oldValues[key].quantity;
                }
            }
        })
    }, true)

})

效果：

在这里插入图片描述

你的美，让我痴迷

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
angular实现一个购物车

html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title
复制链接

扫一扫