AngularJS购物车
来源:互联网 发布:淘宝对比价格的软件 编辑:程序博客网 时间:2024/04/30 08:54
<!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
- 【AngularJS】购物车实例
- AngularJS 购物车实例
- AngularJS-购物车Demo
- angularJS 购物车练习
- 购物车AngularJs
- angularJs购物车
- angularjs bootstrap 购物车
- angularjs完成购物车
- AngularJS购物车代码
- 购物车angularJS
- Angularjs 完成购物车
- AngularJs购物车实现
- angularJs 购物车
- angularjs购物车
- AngularJs购物车代码。
- angularjs购物车
- angularjs实现购物车
- AngularJs 入门购物车
- top命令说明
- 机器学习_用SVD奇异值分解给数据降维
- SSM框架搭建(Maven+Spring+Spring MVC+MyBatis)
- 中小型运维团队如何设计运维自动化平台
- Scrapy框架安装配置
- AngularJS购物车
- 属性动画
- [leetcode]714. Best Time to Buy and Sell Stock with Transaction Fee
- 第七个实验 SYSTIC实验
- tensorflow之inception_v3模型的部分加载及权重的部分恢复(23)---《深度学习》
- 连续数组的最大和
- PullToRefresh上啦刷新下拉加载
- 118 Pascal's Triangle
- mybatis常用jdbcType数据类型