使用angularjs和bootstrap写一个简单的购物车

初学angularjs，联系编写一个简单的angularjs应用--购物车，只是模拟功能。
源代码：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../../vendor/bootstrap/css/bootstrap.min.css">//链入bootstrap文件
    <script src="../../vendor/angular/angularjs.js" type="text/javascript"></script>//链入angularjs
</head>
<body ng-app="myApp">
    <div ng-controller="firstController" class="container">
        <table class="table">
            <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>{{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>
    var app=angular.module('myApp',[]);
    app.controller('firstController',function($scope){
        //购物车物品
        $scope.cart = [
            {
                id:1000,
                name:'iphone5s',
                quantity:3,
                price:4300
            },
            {
                id:3300,
                name:'iphone5',
                quantity:3,
                price:3300
            },
            {
                id:232,
                name:'mac',
                quantity:3,
                price:23000
            },
            {
                id:100,
                name:'ipad',
                quantity:3,
                price:3300
            },
        ];
        //产品总价
        $scope.totalPrice = function(){
            var total = 0;
            angular.forEach($scope.cart,function(item){
                total+=item.quantity*item.price;
            })
            return total;
        }
        //产品总数
        $scope.totalQuantity = function(){
            var total = 0;
            angular.forEach($scope.cart,function(item){
                total+=parseInt(item.quantity);
            })
            return total;
        }
        //移除产品
        $scope.remove = function(id){
            var index =  findIndex(id);
            if(index != -1){
                $scope.cart.splice(index,1)
            }
        }
        //增加数量
        $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.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.$watch('cart',function(newValue, oldValue){
            angular.forEach(newValue,function(item, key){
                if(item.quantity < 1){
                    var returnKey = confirm('是否从购物车中删除该产品?');
                    if(returnKey)
                        $scope.remove(item.id);
                    else
                        item.quantity = oldValue[key].quantity;
                }
            })
        },true);
    });
</script>
</body>
</html>
使用angularjs和bootstrap写一个简单的购物车

猜你喜欢
