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>