angularjs简单购物车

最新推荐文章于 2021-03-12 17:05:59 发布
葛村野人
最新推荐文章于 2021-03-12 17:05:59 发布
阅读量279
点赞数
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>张洋洋0922</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>