Angularjs 完成购物车

最新推荐文章于 2018-10-19 11:15:58 发布

Everett_Y_

最新推荐文章于 2018-10-19 11:15:58 发布

阅读量365

点赞数

分类专栏：工具文章标签： angularjs

本文链接：https://blog.csdn.net/Yanghongli_/article/details/78040182

版权

工具专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'shopcar.jsp' starting page</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	
	<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
	
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-2.1.0.js"></script>
  	<script type="text/javascript" src="${pageContext.request.contextPath}/js/angularjs.js"></script>
 	<script type="text/javascript">
 		var myController=function($scope,$http){
			//后台获取数据
 			$http.post("${pageContext.request.contextPath}/Shopp/selectShopById").success(function(d){
 				$scope.cart=d;
 				
 			});
			//商品数量减少
 			$scope.les = function(id,index){
 				--$scope.cart[index].count;
 				if($scope.cart[index].count>=1){
 					$.post("${pageContext.request.contextPath}/Shopp/lesCount",{"id":id});
 				}
 				
 			}
			//商品数量添加
 			$scope.add = function(id,index){
 				++$scope.cart[index].count;
 				$.post("${pageContext.request.contextPath}/Shopp/addCount",{"id":id});
 			}
			//求出商品的总价格
			$scope.totalPrice=function(){
				var total=0;
				angular.forEach($scope.cart,function(obj,key){
					total+=obj.price*obj.number;
				});
				return total;
			}
			//
 			$scope.$watch('cart',function(newValue,oldValue){
				//console.log(oldValue.number);
				angular.forEach($scope.cart,function(obj,key){
					if(obj.count<1){
						if(confirm("是否删除该商品对象")){
							$scope.cart.splice(key,1);
							$.post("${pageContext.request.contextPath}/Shopp/romoveShopp",{"id":obj.id});
						}else{
							$scope.cart[key].count=oldValue[key].count;
						}
					}
				})
			},true);
 		}
 	</script>
 	<style type="text/css">
 		
 	</style>
 	<style type="text/css">
 		.d{
 			width: 35px
 		}
 	</style>
  </head>
  
  <body ng-app>
  <div ng-controller="myController" class="container">
    <div class="page-header">
  		<h1>购物车</h1>
	</div>
   <table class="container table table-striped table-bordered table-hover table-condensed">
   		<tr align="center">
   			<td> <input type="checkbox"> </td>
   			<td>商品编号</td>
   			<td>商品名称</td>
   			<td>商品单价</td>
   			<td>商品数量</td>
   			<td>操作</td>
   		</tr>
   		<tr ng-repeat="x in cart" align="center">
   			<td> <input type="checkbox"> </td>
   			<td>{{x.pid.pid}} </td>
   			<td>{{x.pid.name}}</td>
   			<td>{{x.pid.price}}</td>
   			<td>
   				<button type="button" class="btn btn-info" id="les" ng-click="les(x.id,$index)">-</button>
   				<input type="text" value="{{x.count}}" class="d" ng-model="x.count">
   				<button type="button" class="btn btn-info" id="add" ng-click="add(x.id,$index)">+</button>
   			</td>
   			<td>删除</td>
   		</tr>
   		<tr>
   			<td colspan="5">总计:￥{{totalPrice()}}</td>
   			<td align="center"><button type="button" class="btn btn-danger "><span class="glyphicon glyphicon-usd"></span>去结算</button></td>
   		</tr>
   </table>
   </div>
  </body>
</html>