angularJS商品购物车案例

浏览数：179 / 时间：2015年06月09日

<!DOCTYPE html>
<html ng-app="shopping">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="bootstrap-3.3.4-dist/css/bootstrap.css"/>
</head>
<body>
    <div class="container">
     <div ng-controller="goodsList">
        <table class="table" ng-show="goods.length">
            <thead>
             <tr>
                <th>
                    产品编号
                </th>
                <th>
                    产品名字
                </th>
                <th>
                    购买数量
                </th>
                <th>
                    产品单价
                </th>
                <th>
                    产品总价
                </th>
                <th>
                    操作
                </th>
             </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in goods">
                    <td><span ng-bind="item.id"></span></td>
                    <td><span ng-bind="item.name"></span></td>
                    <td>
                        <input type="button" value="-" class="btn" ng-click="subNumber(item.id)"/>
                        <input type="text" class="text-center" ng-model="item.sum"/>
                        <input type="button" value="+" class="btn" ng-click="addNumber(item.id)"/>
                    </td>
                    <td><span ng-bind="item.unitPrice"></span></td>
                    <td><span ng-bind="item.sum * item.unitPrice"></span></td>
                    <td><input type="button" value="移除" class="btn btn-danger" ng-click="remove(item.id)"/></td>
                </tr>
                <tr>
                    <td colspan="2">购买总价：<span ng-bind="sumPricesFn()"></span></td>
                    <td colspan="2">购买总数：<span ng-bind="sumFn()"></span></td>
                    <td colspan="2"><input type="button" value="清空购物车" class="btn btn-danger" ng-click="clear()"/></td>
                </tr>
            </tbody>
        </table>
        <div ng-show="!goods.length">您的购物车为空！</div>
     </div>
    </div>
</body>
<script src="../angular.js"></script>
<script>
    var app=angular.module("shopping",[]);
    app.controller("goodsList", function($scope){
        $scope.goods=[
            {
                id:1,
                name:‘苹果6Plus‘,
                sum:3,
                unitPrice:5000
            },
            {
                id:2,
                name:‘苹果5s‘,
                sum:1,
                unitPrice:4000
            },
            {
                id:3,
                name:‘lenovo P404‘,
                sum:1,
                unitPrice:3899
            },
            {
                id:4,
                name:‘飞科剃须刀f77‘,
                sum:10,
                unitPrice:100
            },
            {
                id:5,
                name:‘情侣体恤‘,
                sum:2,
                unitPrice:110
            }
        ];
        //单件商品总价
        $scope.sumPricesFn = function(){
            var sumPrices = 0;
            angular.forEach($scope.goods,function(item){
                sumPrices += item.sum * item.unitPrice;
            });
            return sumPrices;
        };
        //单件商品总数
        $scope.sumFn = function(){
            var sum = 0;
            angular.forEach($scope.goods,function(item){
                sum += Number(item.sum);
            });
            return sum;
        };
        var getIndex = function(id){
            var stateIndex = -1;
            angular.forEach($scope.goods, function(item, index){
                if(id === item.id){
                    stateIndex = index;
                }
            });
            return stateIndex;
        }
        //移除方法
        $scope.remove = function(id){
            var tmpGoodIndex = getIndex(id);
            if(tmpGoodIndex !== -1){
                //将从索引位置为stateIndex删除一个值
                $scope.goods.splice(tmpGoodIndex, 1);
            }
        };
        //清空购物车方法
        $scope.clear = function(){
            $scope.goods=[];
        }
        //增加商品数量
        $scope.addNumber = function(id){
            var tmpGoodIndex = getIndex(id);
            if(tmpGoodIndex !== -1){
                ++$scope.goods[tmpGoodIndex].sum;
            }
        };
        //减少商品数量
        $scope.subNumber = function(id){
            var tmpGoodIndex = getIndex(id);
            if(tmpGoodIndex !== -1){
                --$scope.goods[tmpGoodIndex].sum;
            }
        };

        $scope.$watch(‘goods‘, function(newVal, oldVal){
            angular.forEach(newVal,function(item, index){
                //监听商品信息如果为非法字符那么回归原来的商品数量
                if(isNaN(item.sum) || item.sum < 0){
                    item.sum = oldVal[index].sum;
                }
            });
        },true);
    });
</script>
</html>