angularjs简单购物车源码

发布时间：2020-12-17 08:43:29 所属栏目：安全来源：网络整理

导读：显示： !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titleTitle/title link rel="stylesheet" href="../vendor/bootstrap3/css/bootstrap.min.css"/headbody ng-app div class="container" ng-controller="cartController" table class="table" n

显示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../vendor/bootstrap3/css/bootstrap.min.css">
</head>
<body ng-app>
    <div class="container"  ng-controller="cartController">
        <table class="table" ng-show="cart.length">
            <thead>
                <tr>
                    <th>产品编号</th>
                    <th>产品名字</th>
                    <th>购买数量</th>
                    <th>产品单价</th>
                    <th>产品总价</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in cart">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>
                        <button type="button" ng-click="reduce(item.id)" class="btn btn-primary">-</button>
                        <input type="text" value="{{item.quantity}}" ng-model="item.quantity" />
                        <button type="button" ng-click="add(item.id)" class="btn btn-primary">+</button>
                    </td>
                    <td>{{item.price}}</td>
                    <td>RMB{{item.price * item.quantity}}</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">
                        <button type="button" ng-click="cart = {}" class="btn btn-danger">清空购物车</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <p ng-show="!cart.length">您的购物车为空</p>
    </div>
    <script type="text/javascript" src="../vendor/angular/angularjs.js"></script>
    <script type="text/javascript" src="./app/index.js"></script>
</body>
</html>

实现类模块：

var cartController = function ($scope) {
    $scope.cart = [
        {
            id:1000,name:'iphone5s',quantity:3,price:4300
        },{
            id:3300,name:'iphone5',quantity:30,price:3300
        },{
            id:232,name:'imac',quantity:4,price:23000
        },{
            id:1400,name:'ipad',quantity:5,price:6900
        }
    ];

    /**
     * 计算总价
     */
    $scope.totalPrice = function () {
        var totalPrice = 0;
        angular.forEach($scope.cart,function (item) {
            totalPrice += item.quantity * item.price;
        })
        return totalPrice;
    }

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

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

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

    /**
     * 减少购买数量
     * @param id
     */
    $scope.reduce = 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);
                }
            }
        }
    }

    /**
     * 按id删除方法
     * @param id
     */
    $scope.remove = function (id) {
        var index = findIndex(id);
        if(index != -1){
            $scope.cart.splice(index,1);
        }
    }

    $scope.$watch('cart',function (newValue,oldValue) {
        angular.forEach(newValue,key) {
            if(item.quantity < 1){
                var returnKey = confirm('从购物车内删除该物品？');
                if(returnKey){
                    $scope.remove(id);
                } else {
                    item.quantity = oldValue[key].quantity;
                }
            }
        })
    },true)
}

效果图：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!