angularJS1笔记-(3)-购物车增删改查练习

 

html:

    
    
    



    

        

        

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

        

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

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

                移除
            
        
        

            

                总价:
            
            

                {{totalPrice()}}
            
            

                总购买数量:
            
            

                {{totalCount()}}
            
            

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

js:

angular.module('myApp', []).controller('firstController', function ($scope) {
    $scope.cart = [
        {
            id: 1000,
            name: 'iphone7p',
            quantity: 2,
            price: 4999
        },
        {
            id: 1001,
            name: 'iphone4p',
            quantity: 2,
            price: 999
        },
        {
            id: 1002,
            name: 'iphone6p',
            quantity: 6,
            price: 3999
        },
        {
            id: 1003,
            name: 'iphoneSE',
            quantity: 20,
            price: 11999
        }
    ];

    //计算总价
    $scope.totalPrice = function () {
        var totalPrice = 0;
        angular.forEach($scope.cart, function (item) {
            totalPrice += parseInt(item.quantity) * item.price;
        })
        return totalPrice;
    }
    //计算总购买数量
    $scope.totalCount = function () {
        var totalCount = 0;
        angular.forEach($scope.cart, function (item) {
            totalCount += parseInt(item.quantity);
        })
        return totalCount;
    }
    //移除
    $scope.remove = function (id) {
        var index = -1;
        angular.forEach($scope.cart, function (item, key) {
            if (item.id == id) {
                index = key;
            }
        })
        if (index != -1) {
            $scope.cart.splice(index, 1);
        }
    }

    //找索引 因为angular的机制是通过索引来删除
    var findIndex = function (id) {
        var index = -1;
        angular.forEach($scope.cart, function (item, key) {
            if (item.id == id) {
                index = key;
                return;
            }
        });
        return index;
    }

    //添加
    $scope.add = function (id) {
        var index = findIndex(id);
        if (index != -1) {

            ++$scope.cart[index].quantity;
        }
    }
    //删除
    $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.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.cart.splice(key, 1);
                }else{
                    item.quantity = oldValue[key].quantity;
                }
            }
        })
    },true);
});

　最终结果:

因为angular是MVVM模式的双向绑定数据，所以当你改变其中变量的时候其他地方凡是用到了此变量地方都会跟着变。

 

转载于:https://www.cnblogs.com/yk123/p/6782088.html