<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 thansitional//EN" "http://www.w3.org/th/html4/loose.dtd">
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<%-- <%@include file="/styles/comment/myCss.jsp"%> --%>
<link href="<%=basePath%>styles/bootstrap/css/bootstrap.min.css"
rel="stylesheet">
<body ng-app="myApp">
<div ng-controller="myCon">
<center>
<h3>购物车</h3>
<table bgcolor="1" class="table table-hover" border="" cellspacing=""
cellpadding="">
<tr>
<th>产品编号</th>
<th>产品名称</th>
<th>产品图</th>
<th>购买数量</th>
<th>产品单价</th>
<th>产品总价</th>
<th>操作</th>
</tr>
<tr ng-repeat="x in Product">
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td><img src="{{x.picture}}" width="40px" height="40px;"></td>
<td>
<button ng-click="reduce($index)">-</button>
<input type="text" class="num" ng-model="x.quantity" ng-change="change($index)" />
<button ng-click="add($index)">+</button>
</td>
<td>{{x.price}}</td>
<td>{{x.price * x.quantity}}</td>
<td><button ng-click="remove($index)">移除</button></td>
</tr>
</table>
<div id="shop">
<span>总价:</span><span ng-bind="totalQuantity()"></span>
<span>购买数量</span>
<span>{{numAll()}}</span>
<button ng-click="removeAll()">清空购物车</button>
</div>
</div>
</center>
</body>
<%-- <%@include file="/styles/comment/myJs.jsp"%> --%>
<script type="text/javascript"
src="<%=basePath%>styles/jqueryJs/jquery-3.2.1.min.js"></script>
<script type="text/javascript"
src="<%=basePath%>styles/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript"
src="<%=basePath%>styles/angular/js/AngujarJs1.2.10.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCon", function($scope) {
$scope.Product = [ {
id : 1000,
name : "苹果1",
picture:"<%=basePath%>upload/1001.jpg",
quantity : 1,
price : 7777
}, {
id : 1001,
name : "苹果2",
picture:"<%=basePath%>upload/1001.jpg",
quantity : 1,
price : 9884
}, {
id : 1002,
name : "苹果3",
picture:"<%=basePath%>upload/1001.jpg",
quantity : 1,
price : 4562
}, {
id : 1003,
name : "苹果4",
picture:"<%=basePath%>upload/1001.jpg",
quantity : 1,
price : 18224
} ];
//减少数量
$scope.reduce = function(index) {
if ($scope.Product[index].quantity > 1) {
$scope.Product[index].quantity--;
} else {
$scope.remove(index);
}
}
//添加数量函数
$scope.add = function(index) {
$scope.Product[index].quantity++;
}
//所有商品总价函数
$scope.totalQuantity = function() {
var allprice = 0
for (var i = 0; i < $scope.Product.length; i++) {
allprice += $scope.Product[i].quantity
* $scope.Product[i].price;
}
return allprice;
}
//购买总数量函数
$scope.numAll = function() {
var numAlls = 0
for (var i = 0; i < $scope.Product.length; i++) {
numAlls += $scope.Product[i].quantity;
}
return numAlls;
}
//删除当前商品
$scope.remove = function(index) {
if (confirm("确定要清空数据吗")) {
$scope.Product.splice(index, 1)
}
}
//清空购物车
$scope.removeAll = function() {
if (confirm("你确定套清空购物车所有商品吗?")) {
$scope.Product = [];
}
}
//解决输入框输入负数时变为1
$scope.change = function(index) {
if ($scope.Product[index].quantity >= 0) {
} else {
$scope.Product[index].quantity = 0;
}
}
$scope.$watch('Product', function(oldvalue, newvalue) {
console.log(oldvalue);
console.log(newvalue);
})
})
</script>
</html>
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 thansitional//EN" "http://www.w3.org/th/html4/loose.dtd">
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<%-- <%@include file="/styles/comment/myCss.jsp"%> --%>
<link href="<%=basePath%>styles/bootstrap/css/bootstrap.min.css"
rel="stylesheet">
<body ng-app="myApp">
<div ng-controller="myCon">
<center>
<h3>购物车</h3>
<table bgcolor="1" class="table table-hover" border="" cellspacing=""
cellpadding="">
<tr>
<th>产品编号</th>
<th>产品名称</th>
<th>产品图</th>
<th>购买数量</th>
<th>产品单价</th>
<th>产品总价</th>
<th>操作</th>
</tr>
<tr ng-repeat="x in Product">
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td><img src="{{x.picture}}" width="40px" height="40px;"></td>
<td>
<button ng-click="reduce($index)">-</button>
<input type="text" class="num" ng-model="x.quantity" ng-change="change($index)" />
<button ng-click="add($index)">+</button>
</td>
<td>{{x.price}}</td>
<td>{{x.price * x.quantity}}</td>
<td><button ng-click="remove($index)">移除</button></td>
</tr>
</table>
<div id="shop">
<span>总价:</span><span ng-bind="totalQuantity()"></span>
<span>购买数量</span>
<span>{{numAll()}}</span>
<button ng-click="removeAll()">清空购物车</button>
</div>
</div>
</center>
</body>
<%-- <%@include file="/styles/comment/myJs.jsp"%> --%>
<script type="text/javascript"
src="<%=basePath%>styles/jqueryJs/jquery-3.2.1.min.js"></script>
<script type="text/javascript"
src="<%=basePath%>styles/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript"
src="<%=basePath%>styles/angular/js/AngujarJs1.2.10.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCon", function($scope) {
$scope.Product = [ {
id : 1000,
name : "苹果1",
picture:"<%=basePath%>upload/1001.jpg",
quantity : 1,
price : 7777
}, {
id : 1001,
name : "苹果2",
picture:"<%=basePath%>upload/1001.jpg",
quantity : 1,
price : 9884
}, {
id : 1002,
name : "苹果3",
picture:"<%=basePath%>upload/1001.jpg",
quantity : 1,
price : 4562
}, {
id : 1003,
name : "苹果4",
picture:"<%=basePath%>upload/1001.jpg",
quantity : 1,
price : 18224
} ];
//减少数量
$scope.reduce = function(index) {
if ($scope.Product[index].quantity > 1) {
$scope.Product[index].quantity--;
} else {
$scope.remove(index);
}
}
//添加数量函数
$scope.add = function(index) {
$scope.Product[index].quantity++;
}
//所有商品总价函数
$scope.totalQuantity = function() {
var allprice = 0
for (var i = 0; i < $scope.Product.length; i++) {
allprice += $scope.Product[i].quantity
* $scope.Product[i].price;
}
return allprice;
}
//购买总数量函数
$scope.numAll = function() {
var numAlls = 0
for (var i = 0; i < $scope.Product.length; i++) {
numAlls += $scope.Product[i].quantity;
}
return numAlls;
}
//删除当前商品
$scope.remove = function(index) {
if (confirm("确定要清空数据吗")) {
$scope.Product.splice(index, 1)
}
}
//清空购物车
$scope.removeAll = function() {
if (confirm("你确定套清空购物车所有商品吗?")) {
$scope.Product = [];
}
}
//解决输入框输入负数时变为1
$scope.change = function(index) {
if ($scope.Product[index].quantity >= 0) {
} else {
$scope.Product[index].quantity = 0;
}
}
$scope.$watch('Product', function(oldvalue, newvalue) {
console.log(oldvalue);
console.log(newvalue);
})
})
</script>
</html>
效果图如下: