AngularJs购物车价格计算
来源:互联网 发布:从概念到数据分析 pdf 编辑:程序博客网 时间:2024/03/29 20:41
序列一(y):
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>h3{margin-right: 400px;}table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px;}table tr:nth-child(odd) { background-color: #f1f1f1;}table tr:nth-child(even) { background-color: #ffffff;}#mydiv{display:none}</style><script src="js/jquery-2.1.0.js"></script><script src="js/angular-1.5.5/angular.js"></script><script>var app = angular.module("myapp",[]); app.controller("myctrl",function($scope){ //初始化数据 $scope.goods = [ {name:"qq",price:12.9,number:2,state:false}, {name:"wx",price:23.9,number:12,state:false}, {name:"fd",price:45.9,number:23,state:false}, {name:"asd",price:99.9,number:9,state:false} ]; //删除单个 $scope.dele = function(index){ //删除 $scope.goods.splice(index,1); }; //数量减少有个 $scope.reduce = function(index){ var num = $scope.goods[index].number; if($scope.goods[index].number > 1){ $scope.goods[index].number--; } else if($scope.goods[index].number == 1){ if(confirm("否删除该商品")){ //如果数量小于1 删除 商品 $scope.goods.splice(index,1); }else{ $scope.goods[index].number=num; } } }; //数量增加一个 $scope.add = function(index){ $scope.goods[index].number++; }; //计算总价 $scope.allSum = function(){ var allPrice = 0; var money; for(var i=0; i < $scope.goods.length; i++){ allPrice+= $scope.goods[i].price * $scope.goods[i].number; } money = "¥"+allPrice; return money; }; //全选 反选 $scope.selectAll=false; $scope.all = function(m){ for(var i=0; i < $scope.goods.length; i++){ if(m == true){ $scope.goods[i].state = true; } else{ $scope.goods[i].state = false; } } }; //批量删除 $scope.deleteSel = function(){ var userNames = []; //遍历users数组,获取状态是选中的user对象的名字 for(index in $scope.goods){ if($scope.goods[index].state == true){ userNames.push($scope.goods[index].name); } } if(userNames.length>0){ if(confirm("是否删除选中项?")){ for(i in userNames){ var name = userNames[i]; for(i2 in $scope.goods){ if($scope.goods[i2].name == name){ $scope.goods.splice(i2,1); } if($scope.goods.length ==0 ){ $(function(){ $("table").hide(); $("#mydiv").show(); }); } } } } }else{ alert("请选择删除项"); } }; //删除全部 $scope.deleteall = function(){ $scope.goods.splice($scope.goods); $(function(){ $("table").hide(); $("#mydiv").show(); }); }; });</script></head><body ng-app="myapp" ng-controller="myctrl"><center><h3>我的购物车</h3><table border="1" cellpadding="10" cellspacing="0" align="center"><tr align="center"><td colspan="6"><input type="button" ng-click="deleteall()" value="清空购物车"style=" background-color: #A94442; color: white; margin-left: 520px;" /> <input type="button" ng-click="deleteSel()" value="批量删除"style=" background-color: #A94442; color: white; " /></td></tr><tr align="center"><th><input type="checkbox" ng-model="selectAll" ng-click="all(selectAll)" /></th><th>name</th><th>price</th><th>number</th><th>totalPrice</th><th>option</th></tr><tr ng-repeat="g in goods" align="center"><td><input ng-model="g.state" type="checkbox" ng-checked="selectAll" /></td><td>{{g.name}}</td><td>{{g.price | currency:"¥" }}</td><td><input type="button" value="-" style="background-color: #0000FF; color: white;" ng-click="reduce($index)" /><input type="text" ng-model="g.number" style="width: 25px;" /><input type="button" value="+" style="background-color: #0000FF; color: white;" ng-click="add($index)"/></td><td>{{g.number*g.price | currency:"¥" }}</td><td><input type="button" value="删除" style="background-color: #0000FF; color: white;" ng-click="dele($index)" /></td></tr><tr><td colspan="6">总价为:<span ng-bind="allSum()"></span></td></tr></table> <div id="mydiv">您的购物车为空,<b style="color: #008080;">去逛商城</b></div> </center></body></html>
序列二(g):<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>#mydiv{display:none;}</style><script type="text/javascript" src="../jQuery-2.1.0/jquery-2.1.0.js" ></script><script type="text/javascript" src="../js/angular.js" ></script><script type="text/javascript" src="../js/angular-route.js" ></script><script>var app=angular.module("myApp",[]);app.controller("myCtrl",function($scope){//放入数据$scope.goods=[{"name":"qq","price":"12.9","number":3,state:false},{"name":"wx","price":"23.9","number":5,state:false},{"name":"fd","price":"45.9","number":4,state:false},{"name":"asd","price":"99.9","number":8,state:false}];//删除单个商品$scope.dele=function(index){$scope.goods.splice(index,1);}//数量减少一个$scope.reduce=function(index){var num=$scope.goods[index].number;if ($scope.goods[index].number > 1) {$scope.goods[index].number--;}else if ($scope.goods[index].number==1) {if (confirm("是否删除商品")) {$scope.goods.splice(index,1);} else{$scope.goods[index].number=num;}}};//数量增加一个$scope.add=function(index){$scope.goods[index].number++;};//清空表格数据$scope.deleteall=function(){$scope.goods.splice($scope.goods);$(function(){$("table").hide(); $("#mydiv").show();});};//计算总价$scope.allSum=function(){var allPrice=0;var money;for (var i=0;i<$scope.goods.length;i++) {allPrice+=$scope.goods[i].price*$scope.goods[i].number;}money="¥"+allPrice;return money;};//全选反选$scope.selectAll=false;$scope.all=function(m){for (var i=0;i<$scope.goods.length;i++) {if (m==true) {$scope.goods[i].state=true;} else{$scope.goods[i].state=false;}}}; //批量删除$scope.deleteSel = function(){ var userNames = []; //遍历users数组,获取状态是选中的user对象的名字 for(index in $scope.goods){ if($scope.goods[index].state == true){ userNames.push($scope.goods[index].name); } } if(userNames.length>0){ if(confirm("是否删除选中项?")){ for(i in userNames){ var name = userNames[i]; for(i2 in $scope.goods){ if($scope.goods[i2].name == name){ $scope.goods.splice(i2,1); } if($scope.goods.length ==0 ){ $(function(){ $("table").hide(); $("#mydiv").show(); }); } } } } }else{ alert("请选择删除项"); } };});</script></head><body ng-app="myApp" ng-controller="myCtrl"><center><h3>我的购物车</h3><table border="1" cellpadding="10" cellspacing="0" align="center"><tr align="center"><td colspan="6"><input type="button" value="清空购物车" style="background-color: #E42112;" ng-click="deleteall()"/> <input type="button" value="批量删除" style="background-color: #E42112;" ng-click="deleteSel()"/></td></tr><tr align="center"><th><input type="checkbox" ng-model="selectAll" ng-click="all(selectAll)"/></th><th>name</th><th>price</th><th>number</th><th>totalPrice</th><th>option</th></tr><tr ng-repeat="g in goods" align="center"><td><input ng-model="g.state" type="checkbox" ng-checked="selectAll"/></td><td>{{g.name}}</td><td>{{g.price | currency:"¥"}}</td><td><input type="button" value="-" style="background-color: #0000FF;" ng-click="reduce($index)"/><input type="text" ng-model="g.number" style="width: 30px;" /><input type="button" value="+" style="background-color: #0000FF;" ng-click="add($index)"/></td><td>{{g.price*g.number | currency:"¥"}}</td><td><input type="button" value="删除" style="background-color: #0000FF;" ng-click="dele($index)"/></td></tr><tr><td colspan="6">总价为:<span ng-bind="allSum()"></span></td></tr></table><div id="mydiv">您的购物车为空,<b style="color: #4B8BF4;">去逛商城</b></div></center></body></html>
序列三(p):<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="../AngularJS/angular.js" ></script><script>var app = angular.module("myApp",[]);app.controller("myCtrl",function($scope){$scope.shops = [{name:"qq1",price:12.9,num:3,state:false},{name:"wx1",price:22,num:5,state:false},{name:"qq2",price:33,num:6,state:false},{name:"wx2",price:44,num:4,state:false}];//增加$scope.add = function(index){$scope.shops[index].num += 1; }//减少$scope.reduce = function(index){if($scope.shops[index].num>1){$scope.shops[index].num -= 1; }else{if(window.confirm("要删除"+$scope.shops[index].name+"吗?")){$scope.shops.splice(index,1);}else{}}}//获取总价$scope.allPrice = function(){var all = 0;for(index in $scope.shops){all += $scope.shops[index].price * $scope.shops[index].num;}return all;}//全选$scope.selectAll = false;$scope.selectAllFun = function(){if($scope.selectAll){for(index in $scope.shops){$scope.shops[index].state = true;}}else{for(index in $scope.shops){$scope.shops[index].state = false;}}}//反选$scope.checkSelectAll = function(){var flag = false;for(index in $scope.shops){if($scope.shops[index].state){}else{flag = true;}}//至少有一个没有被选中if(flag){$scope.selectAll = false;}else{$scope.selectAll = true;}}//批量删除$scope.deleteSelected = function(){var selectedShop = [];for(index in $scope.shops){if($scope.shops[index].state){selectedShop.push($scope.shops[index].name);}}if(selectedShop.length>0){for(i1 in selectedShop){for(i2 in $scope.shops){if(selectedShop[i1] == $scope.shops[i2].name){$scope.shops.splice(i2,1);}}}}else{alert("请先选择")}}//判断数据源的长度$scope.getSize = function(){if($scope.shops.length > 0 ){return false;}else{return true;}}});</script></head><body ng-app="myApp" ng-controller="myCtrl"><center><h3>我的购物车</h3><button ng-click="deleteSelected()">批量删除</button><br /><br /><table ng-hide="getSize()" border="1 solid blue" cellpadding="10" cellspacing="0"><thead><tr><th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></th><th>name</th><th>price</th><th>number</th><th>totalPrice</th><th>option</th></tr></thead><tbody><tr ng-repeat="shop in shops"><td><input type="checkbox" ng-model="shop.state" ng-click="checkSelectAll()"/></td><td>{{shop.name}}</td><td>{{shop.price | currency:"¥"}}</td><td><button ng-click="reduce($index)">-</button><input type="number" ng-model="shop.num" style="width: 30px;"/><button ng-click="add($index)">+</button></td><td>{{shop.price * shop.num | currency:"¥"}}</td><td><button>删除</button> </td></tr><tr><td colspan="6">总价为:<span ng-bind="allPrice() | currency:'¥'"></span></td></tr></tbody></table><span ng-show="getSize()">您的购物车为空,请先逛<a href="#">购物车</a></span></center></body></html>
阅读全文
0 0
- AngularJs购物车价格计算
- js购物车价格计算
- 购物车价格计算工具类
- jquery 无刷新添加/删除 input行 实时计算购物车价格
- jquery 无刷新添加/删除 input行 实时计算购物车价格
- 组合模式设计购物车价格计算实例(仅供学习使用)
- 淘宝京东购物车价格计算,商品店铺联动js
- angularjs之购物金额计算
- AngularJs购物车删除和计算总金额
- AngularJs购物车删除和计算总金额
- Angularjs购物车计算价格例子
- angularJs小应用----计算购物金额-动态改变邮费
- AngularJS购物车功能增加/删除/价格的计算
- 【AngularJS】购物车实例
- AngularJS 购物车实例
- AngularJS-购物车Demo
- angularJS 购物车练习
- 购物车AngularJs
- Android 屏幕旋转(一):旋转设置
- linux 命令
- 【扫描线+贪心+线段树】Codeforces 458C Elections
- Linux CentOS7 安装 配置 Redis 3.2.8
- 最新androidStudio上jni开发全覆盖
- AngularJs购物车价格计算
- 通过反射,创建类的实例三
- 01背包问题
- FFplay使用指南
- redis、memcached、mongoDB 对比
- 夯实基础,步步攀升
- L1-009. N个数求和
- 购物车,计算价格,tian
- 旋转html