angularjs实现购物车

来源：互联网发布：linux 杀死进程编辑：程序博客网时间：2024/05/21 15:39

案例: 实现购物车功能

要求：技术要求（html+css+angularjs）

1. 完成页面布局，如图1.1（button按钮可以用普通按钮）（页面布局合理、代码无误）

2.Ø声明数据对象，初始化商品信息，数据自拟且不低于四条

3. 用ng-repaet指令将对象遍历并渲染到页面中

4.Ø点击”+”按钮输入框中的数量加1，同时可以计算出商品小计和购物车总价。同理，当点击”-”按钮时输入框中的数量减1，商品小计和购物车总价都会改变。在输入框中手动输入数量值，商品小计和购物车总价动态改变

5. 使用AngularJS的过滤器在商品价格、商品小计、购物车总价前加”￥：”。

6. 当商品数量为1，用户点击”-”操作时，弹出对话框，询问用户是否删除该商品。如图1.2当用户点击”确认”时删除该条商品信息，当用户点击”取消”时商品恢复原来数量。

7. 用户点击第一个checkbox代表全选，全选商品后点击删除选中商品，选中商品被删除，若购物车商品被全部删除后，展示如图1.3

8. 关键代码有注释，项目名：MyShopping+名字拼音+日期

源码：

<!doctype html><html ng-app="myApp"><head>    <meta charset="utf-8">    <title>购物车</title>    <style>        table{            width: 1000px;            height: 0px;        }        tr{            height: 50px;        }    </style>    <script src="jquery.1.12.4.js"></script>    <script src="angular-1.3.0.js"></script>    <script>        var A=angular.module('myApp',[]);        //购物车  加        A.directive('myAdds',function(){            return {                link:function(scope, element, attr){                    element.click(function(){                        var This=this                        angular.forEach(scope.dataList,function(data,index,array){                            if(attr.items==data.items){                                data.num=parseInt(data.num)+1;                                scope.allPrices();                                scope.$apply() //刷新视图                            }                        });                    });                }            }        })        //购物车  减        A.directive('myMinus',function(){            return {                link:function(scope, element, attr){                    element.click(function(){                        var This=this                        angular.forEach(scope.dataList,function(data,index,array){                            if(attr.items==data.items){                                if(data.num<=1){                                    if(confirm('是否删除该产品')){                                        data.num=0;                                        $(This).siblings('input').val(0);                                        scope.allPrices();                                        scope.$apply();//delete array[index];                                        scope.dataList.splice(index,1)                                        $(This).parents('tr').remove();                                    }                                }else{                                    data.num=parseInt(data.num)-1;                                };                                scope.allPrices();                                scope.$apply();                            }                        });                    });                }            }        })        //全选，全不选        A.directive('allOrcan',function(){            return function(scope, element, attr){                element.click(function(){                    var isCheck=$(this).find('input').prop('checked');                    if(isCheck){                        $('input[type=checkbox]').prop('checked',true);                    }else{                        $('input[type=checkbox]').not($('input[type=checkbox]').eq(0)).prop('checked',false);                    }                    angular.forEach(scope.dataList,function(data,index,array){                        data.Bol=isCheck;                    })                    scope.allPrices();                    scope.$apply();                })            }        })        //单选        A.directive('oneCheck',function(){            return function(scope, element, attr){                element.click(function(){                    var This=this                    angular.forEach(scope.dataList,function(data,index,array){                        if(attr.items==data.items){                            var isCheck=$(This).prop('checked');                            data.Bol=isCheck;                            scope.allPrices();                            scope.$apply();                        }                    })                });            }        })        A.controller('myAngular',['$scope','$filter',function($scope,$filter){            $scope.dataList=[//初始化购物车的数据                {Bol:'false',name:'洗衣机',num:'1',items:'0',oneprice:'900',price:''},                {Bol:'false',name:'热水器',num:'1',items:'1',oneprice:'110',price:''},                {Bol:'false',name:'空调',num:'1',items:'2',oneprice:'116',price:''},                {Bol:'false',name:'冰箱',num:'1',items:'3',oneprice:'2087',price:''},                {Bol:'false',name:'电磁炉',num:'1',items:'4',oneprice:'135',price:''},                {Bol:'false',name:'被子',num:'1',items:'5',oneprice:'50',price:''},                {Bol:'false',name:'本子',num:'1',items:'6',oneprice:'2',price:''},                {Bol:'false',name:'笔',num:'1',items:'7',oneprice:'115',price:''},                {Bol:'false',name:'杯子',num:'1',items:'8',oneprice:'12',price:''},                {Bol:'false',name:'书',num:'1',items:'9',oneprice:'5',price:''},                {Bol:'false',name:'零食',num:'1',items:'10',oneprice:'13',price:''}            ];//总价格的计算            $scope.allPrices=function(){                $scope.allprice=0;                angular.forEach($scope.dataList,function(data,index,array){                    for(var i = 0 ; i <$scope.dataList.length;i++ ){                        data.price=data.num*data.oneprice;                    }                    $scope.allprice+=parseInt(data.price);                })                return $scope.allprice;            };//按单价排序            $scope.CartSort=function(arg){                angular.forEach($scope.dataList,function(data,index,array){                    arguments.callee['CartSort('+arg+')']=!arguments.callee['CartSort('+arg+')']                    $scope.dataList=$filter('orderBy')($scope.dataList,arg,arguments.callee['CartSort('+arg+')'])                })            }            $scope.remove = function(index){                if(confirm("你是否将商品移出购物车？")){                        $scope.dataList.splice(index,1)                }            }            //清空购物车            $scope.removeAll=function(){                if(confirm('确定清空购物车')){                    $scope.dataList=[];                }            }        }])    </script></head><body ng-controller="myAngular"><hr><h1>我的购物车</h1><button class="btn btn-warning "ng-click="removeAll()" style="background: firebrick">清空购物车</button><table border="1" cellspacing="0" style="text-align: center;">    <tr>        <td><label all-orcan><input type="checkbox"></label></td>        <td>name</td>        <td ng-click='CartSort("oneprice")'>price</td>        <td>number</td>        <td>totalPrice</td>        <td>option</td>    </tr>    <tr ng-repeat="data in dataList">        <td><input type="checkbox" one-check items={{data.items}}></td>        <td ng-cloak>{{data.name}}</td>        <td ng-cloak>{{data.oneprice| currency: "￥"}}</td>        <td><button my-minus items="{{data.items}}" ng-class="{cursors:true}" >-</button><input type="text" ng-cloak ng-model="data.num"  items="{{data.items}}" style="width:50px;text-align:center;"> <button my-adds items="{{data.items}}" ng-class="{cursors:true}" >+</button> </td>        <td ng-cloak>{{data.price| currency: "￥"}}</td>        <td><button ng-click="remove($index)">删除</button></td>    </tr>    <tr>        <td colspan="6">            <div style="text-align: left">总价格：{{allPrices()| currency: "￥"}}</div>        </td>    </tr></table></body></html>

阅读全文

0 0