angularjs简单购物车源码

显示：

    
    
    


    

        

            

                

                    
产品编号
                    
产品名字
                    
购买数量
                    
产品单价
                    
产品总价
                    
操作
                
            
            

                

                    
{{item.id}}
                    
{{item.name}}
                    

                        -
                        
                        +
                    
                    
{{item.price}}
                    
RMB {{item.price * item.quantity}}
                    

                        移除
                    
                
                

                    

                        总购买价
                    
                    

                        {{totalPrice()}}
                    
                    

                        总购买数量
                    
                    

                        {{totalQuantity()}}
                    
                    

                        清空购物车
                    
                
            
        
        
您的购物车为空
    
    
    

实现类模块：

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, function (item, key) {
            if(item.quantity < 1){
                var returnKey = confirm('从购物车内删除该物品？');
                if(returnKey){
                    $scope.remove(id);
                } else {
                    item.quantity = oldValue[key].quantity;
                }
            }
        })
    },true)
}

效果图：