<html>
<head>
<base href="<%=basePath%>">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<link rel="stylesheet"
href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
<link rel="stylesheet"
href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script
src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angularjs.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope, $http) {
$http.get("${pageContext.request.contextPath}/Shoppingcart/selectAll")
.success(function (response) {
$scope.data=response;
});
$scope.reduce=function(index){
var id=$scope.data[index].id;
$http.get("${pageContext.request.contextPath}/Shoppingcart/reduce?id="+id)
.success(function (response) {
--$scope.data[index].count;
});
};
$scope.add=function(index){
var id=$scope.data[index].id;
$http.get("${pageContext.request.contextPath}/Shoppingcart/add?id="+id)
.success(function (response) {
++$scope.data[index].count;
});
};
$scope.mycount=function(index){
var id=$scope.data[index].id;
var count=$scope.data[index].count;
$http.get("${pageContext.request.contextPath}/Shoppingcart/updatecount?id="+id+"&"+"count="+count)
.success(function (response) {
});
};
$scope.remove=function(index){
var id=$scope.data[index].id;
$http.get("${pageContext.request.contextPath}/Shoppingcart/delete?id="+id)
.success(function (response) {
$scope.data.splice(index,1);
});
};
/* $scope.totalPrice=function(){
var sum=0;
angular.forEach($scope.data,function(obj,key){
sum+=obj.count*obj.product.price;
});
return sum;
}; */
$scope.$watch('data',function(newValue,oldValue){
angular.forEach($scope.data,function(obj,key){
if(obj.count<1){
if(confirm("是否删除该商品"))
{
var id=$scope.data[key].id;
alert(id);
$http.get("${pageContext.request.contextPath}/Shoppingcart/delete?id="+id)
.success(function (response) {
$scope.data.splice(key,1);
});
}else{
$scope.data[key].count=oldValue[key].count;
}
}
});
},true);
var arr = new Array();
$scope.pri=function(index){
var count =0;
arr.push(index);
$scope.totalPrice=function(){
for (var i = 0; i < arr.length; i++) {
count += $scope.data[arr[i]].count * $scope.data[arr[i]].product.price;
}
return count;
};
};
});
</script>
</head>
<body ng-app="myApp">
<div class="container" ng-controller="myController">
<div class="page-header">
<h1>
我的购物车 <small>shopping</small>
</h1>
</div>
<a class="btn btn-default"
href="${pageContext.request.contextPath}/main.jsp" role="button">返回购物页面</a>
<div class="col-md-offset-11">
<button class="btn btn-danger" ng-show="data.length"
ng-click="data={}">清空购物车</button>
</div>
<table
class="table table-striped table-hover table-condensed table-responsive table-bordered "
ng-show="data.length">
<tr>
<td><input type="checkbox" ng-model="box"></td>
<td>编号</td>
<td>商品名称</td>
<td>商品单价</td>
<td>购买数量</td>
<td>商品小计</td>
<td>操作</td>
</tr>
<tr ng-repeat="x in data">
<td><input type="checkbox" ng-checked="box"
ng-click="pri($index)"></td>
<td>{{x.id}}</td>
<td>{{x.product.name}}</td>
<td>{{x.product.price}}</td>
<td>
<button class="btn btn-primary" ng-click="reduce($index)">-</button>
<input type="text" value="{{x.count}}" ng-model="x.count"
ng-blur="mycount($index)" style="width: 30px;">
<button class="btn btn-primary" ng-click="add($index)">+</button>
</td>
<td>{{x.count*x.product.price}}</td>
<td><button class="btn btn-default" type="submit"
ng-click="remove($index)">
<span class="glyphicon glyphicon-trash"></span> 删除
</button></td>
</tr>
<tr>
<td colspan="6">总计价格为:{{totalPrice()}}</td>
</tr>
</table>
<div ng-show="!data.length">您的购物车为空,先购物</div>
</div>
</body>
</html>
<head>
<base href="<%=basePath%>">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<link rel="stylesheet"
href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
<link rel="stylesheet"
href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script
src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angularjs.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope, $http) {
$http.get("${pageContext.request.contextPath}/Shoppingcart/selectAll")
.success(function (response) {
$scope.data=response;
});
$scope.reduce=function(index){
var id=$scope.data[index].id;
$http.get("${pageContext.request.contextPath}/Shoppingcart/reduce?id="+id)
.success(function (response) {
--$scope.data[index].count;
});
};
$scope.add=function(index){
var id=$scope.data[index].id;
$http.get("${pageContext.request.contextPath}/Shoppingcart/add?id="+id)
.success(function (response) {
++$scope.data[index].count;
});
};
$scope.mycount=function(index){
var id=$scope.data[index].id;
var count=$scope.data[index].count;
$http.get("${pageContext.request.contextPath}/Shoppingcart/updatecount?id="+id+"&"+"count="+count)
.success(function (response) {
});
};
$scope.remove=function(index){
var id=$scope.data[index].id;
$http.get("${pageContext.request.contextPath}/Shoppingcart/delete?id="+id)
.success(function (response) {
$scope.data.splice(index,1);
});
};
/* $scope.totalPrice=function(){
var sum=0;
angular.forEach($scope.data,function(obj,key){
sum+=obj.count*obj.product.price;
});
return sum;
}; */
$scope.$watch('data',function(newValue,oldValue){
angular.forEach($scope.data,function(obj,key){
if(obj.count<1){
if(confirm("是否删除该商品"))
{
var id=$scope.data[key].id;
alert(id);
$http.get("${pageContext.request.contextPath}/Shoppingcart/delete?id="+id)
.success(function (response) {
$scope.data.splice(key,1);
});
}else{
$scope.data[key].count=oldValue[key].count;
}
}
});
},true);
var arr = new Array();
$scope.pri=function(index){
var count =0;
arr.push(index);
$scope.totalPrice=function(){
for (var i = 0; i < arr.length; i++) {
count += $scope.data[arr[i]].count * $scope.data[arr[i]].product.price;
}
return count;
};
};
});
</script>
</head>
<body ng-app="myApp">
<div class="container" ng-controller="myController">
<div class="page-header">
<h1>
我的购物车 <small>shopping</small>
</h1>
</div>
<a class="btn btn-default"
href="${pageContext.request.contextPath}/main.jsp" role="button">返回购物页面</a>
<div class="col-md-offset-11">
<button class="btn btn-danger" ng-show="data.length"
ng-click="data={}">清空购物车</button>
</div>
<table
class="table table-striped table-hover table-condensed table-responsive table-bordered "
ng-show="data.length">
<tr>
<td><input type="checkbox" ng-model="box"></td>
<td>编号</td>
<td>商品名称</td>
<td>商品单价</td>
<td>购买数量</td>
<td>商品小计</td>
<td>操作</td>
</tr>
<tr ng-repeat="x in data">
<td><input type="checkbox" ng-checked="box"
ng-click="pri($index)"></td>
<td>{{x.id}}</td>
<td>{{x.product.name}}</td>
<td>{{x.product.price}}</td>
<td>
<button class="btn btn-primary" ng-click="reduce($index)">-</button>
<input type="text" value="{{x.count}}" ng-model="x.count"
ng-blur="mycount($index)" style="width: 30px;">
<button class="btn btn-primary" ng-click="add($index)">+</button>
</td>
<td>{{x.count*x.product.price}}</td>
<td><button class="btn btn-default" type="submit"
ng-click="remove($index)">
<span class="glyphicon glyphicon-trash"></span> 删除
</button></td>
</tr>
<tr>
<td colspan="6">总计价格为:{{totalPrice()}}</td>
</tr>
</table>
<div ng-show="!data.length">您的购物车为空,先购物</div>
</div>
</body>
</html>