大佬教程收集整理的这篇文章主要介绍了angularJS制作的购物车功能，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<!DOCTYPEhtml> <htmllang="en"ng-app="myapp"> <head> <Metacharset="UTF-8"> <title>Document</title> <style> body,html{width:100%;height:100%;margin:0;padding:0;white-space:Nowrap;font-family:Arial,"HiraginoSansGB","微软雅黑","宋体";} ul,li,h4,p{margin:0;padding:0;} li{list-style:none;} h4{margin-bottom:6px;} p{margin-bottom:6px;} #bg{width:100%;height:100%;BACkground:#FAFB98;display:inline-block;} #owrap{width:800px;height:460px;position:relative;left:calc(50%-400pX);top:calc(50%-230pX);border-radius:30px;Box-shadow:010px28px#E0D272;transition:allease0.3s;-webkit-transition:allease0.3s;-moz-transition:allease0.3s;-ms-transition:allease0.3s;BACkground:#fff;} #oBox{width:100%;height:460px;position:relative;transition:allease0.3s;-webkit-transition:allease0.3s;-moz-transition:allease0.3s;-ms-transition:allease0.3s;opacity:1;} #oul{width:100%;overflow:auto;position:relative;display:inline-block;} #oula{width:18px;height:18px;color:#909696;line-height:18px;border:1pxsolid#909696;margin-bottom:6px;text-align:center;text-decoration:none;display:inline-block;} #oulspan{margin:05px05px;} #oullidiv{width:110px;height:22px;border-radius:6px;text-align:center;line-height:22px;font-size:14px;cursor:pointer;BACkground:#FF6F3c;color:#fff;} #oul.li_adds{Border:5pxdotted#FF6F3c;} #oul.have_adds{BACkground:#FCDD68;} #oulli{width:130px;height:116px;padding:10px0020px;list-style:none;border:5pxdotted#DBE3E4;float:left;margin:20px20px020px;border-radius:20px;} .oall{width:200px;height:50px;line-height:50px;text-align:center;font-size:20px;letter-spacing:10px;display:inline-block;position:absolute;left:50px;bottom:30px;transition:allease0.3s;-webkit-transition:allease0.3s;-moz-transition:allease0.3s;-ms-transition:allease0.3s;} .oconfirm{width:200px;height:50px;line-height:50px;text-align:center;font-size:25px;letter-spacing:10px;BACkground:#FF6F3c;color:#fff;display:inline-block;text-decoration:none;border-radius:25px;position:absolute;left:550px;bottom:30px;transition:allease0.3s;-webkit-transition:allease0.3s;-moz-transition:allease0.3s;-ms-transition:allease0.3s;} #items{width:100%;overflow:hidden;padding-top:20px;} #itemsli{width:calc(100%-40pX);height:30px;line-height:30px;color:#677A7A;padding:020px020px;position:relative;} #itemsli.each_all{width:200px;display:inline-block;position:absolute;left:150px;} .even{BACkground:#DBE3E4;} </style> </head> <body> <divid="bg"ng-controller="ctrler"> <divid="owrap"> <divid="oBox"ng-view> </div> <spanid="ospan"class="oall"ng-bind-template="总金额：{{all_cal.num}}元"></span> <ahref="#go_buy"ng-click="go_cal($event)"class="oconfirm"ng-click="go_cal()">~去结算~</a> </div> </div> <scriptsrc="http://cdn.bootcss.com/angular.js/1.3.15/angular.min.js"></script> <scriptsrc="http://cdn.bootcss.com/angular.js/1.3.15/angular-route.min.js"></script> <scripttype="text/javascript"> varm1=angular.module("myapp",['ngRoute']); m1.config(['$routeProvider',function($routeProvider){ $routeProvider .when("/",{ template: "<ulid='oul'>\ <ling-repeat='fruiTinifruit'ng-controller='eachCtrl'class='`li_border`'>\ <h4ng-bind='fruit.name'></h4>\ <p>单价：<spAnng-bind='fruit.money'></span></p>\ 数量：<ahref='javascript:;'ng-click='oreduce()'>-</a>\ <spAnng-bind='fruit.num'></span>\ <ahref='javascript:;'ng-click='oadd()'>+</a>\ <divclass='`have_click`'ng-click='addTo($event)'ng-bind='ocon'></div></li></ul>" }) .when("/go_buy",{ template: "<ulid='items'>\ <ling-repeat='ofruiTinnew_arr'ng-class='{even:$even?true:falsE}'ng-hide='ofruit.num==0'>\ <spAnng-bind-template='{{ofruit.namE}}：{{ofruit.money}}x{{ofruit.num}}'></span>\ <spanclass='each_all'ng-bind-template='************************ {{ofruit.money*ofruit.num}}'></span></li></ul>" }) }]); m1.controller("ctrler",["$scope","$timeout",function($scope,$timeout){ $scope.all_cal={num:0}; $scope.arr_fruit=[{name:"香蕉",money:5,num:1,buy:falsE},{name:"苹果",money:9,{name:"雪梨",money:6,{name:"西瓜",money:10,{name:"火龙果",money:8,{name:"荔枝",money:11,{name:"榴莲",money:18,{name:"哈密瓜",buy:falsE}]; //点击去结算 $scope.ifruit=$scope.arr_fruit; $scope.oturn=true; $scope.go_cal=function(event){ $scope.new_arr=[]; //筛选出已加入购物车的水果 for(vari=0;i<$scope.arr_fruit.length;i++){ if($scope.arr_fruit[i].buy==truE){ $scope.new_arr.push($scope.arr_fruit[i]); } } if($scope.oturn){ event.target.href="#go_buy"; event.target.innerHTML="返回"; setStyle(event.target,{'height':'30px','left':'calc(50%-100pX)','fontSize':'18px','lineHeight':'30px'}); setStyle(event.target.parentNode,{'width':'400px','borderRadius':'0','left':'calc(50%-200pX)'}); setStyle(event.target.parentNode.children[0],{'opacity':0}); setStyle(event.target.parentNode.children[1],{'left':'calc(50%-100pX)','bottom':'60px'});//不知道为什么这里不能用childNodes[1]无效 $scope.oturn=false; $scope.ifruit=[]; } else{ event.target.href="#/"; event.target.innerHTML="~去结算~"; setStyle(event.target,{'height':'50px','left':'550px','fontSize':'25px','lineHeight':'50px'}); setStyle(event.target.parentNode,{'width':'800px','borderRadius':'30px','left':'calc(50%-400pX)'}); setStyle(event.target.parentNode.children[1],{'left':'50px','bottom':'30px'}); $scope.oturn=true; //设置延迟出现以防瞬移突兀 $timeout(function(){ $scope.ifruit=$scope.arr_fruit; },400); } }; }]); m1.controller("eachCtrl",function($scopE){ varoindex=$scope.$index; if($scope.arr_fruit[oindex].buy){ $scope.li_border="li_adds"; $scope.ocon="取消购买"; $scope.have_click="have_adds"; } else{ $scope.li_border=""; $scope.ocon="添加到购物车"; $scope.have_click=""; } //点击-号时 $scope.oreduce=function(){ if($scope.arr_fruit[oindex].num==1){ return; } $scope.arr_fruit[oindex].num=$scope.arr_fruit[oindex].num-1; if($scope.arr_fruit[oindex].buy){ $scope.all_cal.num=$scope.all_cal.num-$scope.fruit.money; } }; //点击+号时 $scope.oadd=function(){ if($scope.arr_fruit[oindex].num==99){ return; } $scope.arr_fruit[oindex].num=$scope.arr_fruit[oindex].num+1; if($scope.arr_fruit[oindex].buy){ $scope.all_cal.num=$scope.all_cal.num+$scope.fruit.money; } }; //点击添加到购物车时 $scope.addTo=function(event){ if($scope.arr_fruit[oindex].buy){ $scope.ocon="添加到购物车"; $scope.all_cal.num=$scope.all_cal.num-$scope.fruit.money*$scope.arr_fruit[oindex].num; $scope.arr_fruit[oindex].buy=false; $scope.li_border=""; $scope.have_click=""; } else{ $scope.ocon="取消购买"; $scope.all_cal.num=$scope.all_cal.num+$scope.fruit.money*$scope.arr_fruit[oindex].num; $scope.arr_fruit[oindex].buy=true; $scope.li_border="li_adds"; $scope.have_click="have_adds"; } }; }]); functionsetStyle(obj,json){ for(attrinjson){ obj.style[attr]=json[attr]; } } </script> </body> </html>
以上是大佬教程为你收集整理的angularJS制作的购物车功能全部内容，希望文章能够帮你解决angularJS制作的购物车功能所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。