当前位置：Gxlcms > JavaScript > Angularjs 制作购物车功能实例代码

Angularjs 制作购物车功能实例代码

时间：2021-07-01 10:21:17 帮助过：7人阅读

初学angularJS   闲暇之余做了个小案例。

功能：计算购物车商品的价格，以及删除购物车商品。

以下是完整案例（jQuery和angularjs需要自己引入）

  1. <!doctype html>
  2. <html ng-app="myApp">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <style>
  7. .cursors{cursor:pointer}
  8. </style>
  9. <script src="js/jquery-1.11.1.js"></script>
  10. <script src="js/angular.min.js"></script>
  11. <script>
  12. var A=angular.module('myApp',[]);
  13. //购物车 加
  14. A.directive('myAdds',function(){
  15. return {
  16. link:function(scope, element, attr){
  17. element.click(function(){
  18. var This=this
  19. angular.forEach(scope.dataList,function(data,index,array){
  20. if(attr.items==data.items){
  21. data.num=parseInt(data.num)+1;
  22. scope.allPrices();
  23. scope.$apply() //刷新视图
  24. }
  25. });
  26. });
  27. } 
  28. }
  29. })
  30. //购物车 减
  31. A.directive('myMinus',function(){
  32. return {
  33. link:function(scope, element, attr){
  34. element.click(function(){
  35. var This=this
  36. angular.forEach(scope.dataList,function(data,index,array){
  37. if(attr.items==data.items){
  38. if(data.num<=1){
  39. if(confirm('是否删除该产品')){
  40. data.num=0;
  41. $(This).siblings('input').val(0);
  42. scope.allPrices();
  43. scope.$apply();
  44. //delete array[index];
  45. scope.dataList.splice(index,1)
  46. $(This).parents('tr').remove();
  47. }
  48. }else{
  49. data.num=parseInt(data.num)-1;
  50. };
  51. scope.allPrices();
  52. scope.$apply();
  53. }
  54. });
  55. });
  56. } 
  57. }
  58. })
  59. //全选，全不选
  60. A.directive('allOrcan',function(){
  61. return function(scope, element, attr){
  62. element.click(function(){
  63. var isCheck=$(this).find('input').prop('checked');
  64. if(isCheck){
  65. $('input[type=checkbox]').prop('checked',true);
  66. }else{
  67. $('input[type=checkbox]').not($('input[type=checkbox]').eq(0)).prop('checked',false);
  68. }
  69. angular.forEach(scope.dataList,function(data,index,array){
  70. data.Bol=isCheck;
  71. })
  72. scope.allPrices();
  73. scope.$apply();
  74. })
  75. }
  76. })
  77. //单选
  78. A.directive('oneCheck',function(){
  79. return function(scope, element, attr){
  80. element.click(function(){
  81. var This=this
  82. angular.forEach(scope.dataList,function(data,index,array){
  83. if(attr.items==data.items){
  84. var isCheck=$(This).prop('checked');
  85. data.Bol=isCheck;
  86. scope.allPrices();
  87. scope.$apply();
  88. }
  89. })
  90. });
  91. }
  92. })
  93. A.controller('myAngular',['$scope','$filter',function($scope,$filter){
  94. $scope.dataList=[//初始化购物车的数据
  95. {Bol:'false',name:'洗衣机',num:'1',items:'0',oneprice:'900',price:''},
  96. {Bol:'false',name:'热水器',num:'1',items:'1',oneprice:'110',price:''},
  97. {Bol:'false',name:'空调',num:'1',items:'2',oneprice:'116',price:''},
  98. {Bol:'false',name:'冰箱',num:'1',items:'3',oneprice:'2087',price:''},
  99. {Bol:'false',name:'电磁炉',num:'1',items:'4',oneprice:'135',price:''},
  100. {Bol:'false',name:'被子',num:'1',items:'5',oneprice:'50',price:''},
  101. {Bol:'false',name:'本子',num:'1',items:'6',oneprice:'2',price:''},
  102. {Bol:'false',name:'笔',num:'1',items:'7',oneprice:'115',price:''},
  103. {Bol:'false',name:'杯子',num:'1',items:'8',oneprice:'12',price:''},
  104. {Bol:'false',name:'书',num:'1',items:'9',oneprice:'5',price:''},
  105. {Bol:'false',name:'零食',num:'1',items:'10',oneprice:'13',price:''}
  106. ];
  107. //总价格的计算
  108. $scope.allPrices=function(){
  109. $scope.allprice=0;
  110. angular.forEach($scope.dataList,function(data,index,array){
  111. data.price=data.num*data.oneprice;
  112. if(data.Bol==true){
  113. $scope.allprice+=parseInt(data.price);
  114. }
  115. })
  116. return $scope.allprice;
  117. };
  118. //按单价排序
  119. $scope.CartSort=function(arg){
  120. angular.forEach($scope.dataList,function(data,index,array){
  121. arguments.callee['CartSort('+arg+')']=!arguments.callee['CartSort('+arg+')']
  122. $scope.dataList=$filter('orderBy')($scope.dataList,arg,arguments.callee['CartSort('+arg+')'])
  123. })
  124. }
  125. }])
  126. </script>
  127. </head>
  128. <body ng-controller="myAngular">
  129. <table border="1">
  130.    <tr>
  131.      <td><label all-orcan><input type="checkbox">全选/取消全选 </label></td>
  132.      <td>名称</td>
  133.      <td>数量</td>
  134.      <td ng-click='CartSort("oneprice")'>单价</td>
  135.      <td>价格</td>
  136.     </tr>
  137.    <tr ng-repeat="data in dataList">
  138.      <td><input type="checkbox" one-check items={{data.items}}></td>
  139.      <td ng-cloak>{{data.name}}</td>
  140.      <td><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> <button my-minus items="{{data.items}}" ng-class="{cursors:true}" >-</button>　</td>
  141.      <td ng-cloak>{{data.oneprice}}</td>
  142.      <td ng-cloak>{{data.price}}</td>
  143.     </tr>
  144.    
  145.   </table>
  146.   <div>总价格：{{allPrices()}}</div>
  147. </body>
  148. </html>
  149. <!--<script>alert(0)</script>-->

效果如图所示： 

尊重劳动成果，转载请注明出处（http://blog.csdn.net/sllailcp/article/details/47833315）...

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！