购物车

最新推荐文章于 2023-05-26 14:36:40 发布

原创最新推荐文章于 2023-05-26 14:36:40 发布 · 211 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#购物车

购物车专栏收录该内容

2 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/angular.js" ></script>
		<script type="text/javascript" src="js/angular-route.js" ></script>
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
		<script type="text/javascript">
			var app=angular.module("myapp",[]);
			app.controller("myctrl",function($scope){
				$scope.shopList=[
				{name:'辣条',price:'80.90',num:""},
				{name:'唐僧肉',price:'20.40',num:""},
				{name:'仙丹',price:'46.90',num:""},
				{name:'粘牙糖',price:'231.00',num:""},
				{name:'魔鬼糖',price:'279.30',num:""}
				];
				//减少
				$scope.reduce=function(index){
					if($scope.shopList[index].num>1){
						$scope.shopList[index].num--;
					}else{
						$scope.remove(index);
					}
				};
				//增加
				$scope.add=function(index){
					$scope.shopList[index].num++;
				}
				//总价
				$scope.allSum=function(){
					var allPrice = 0;
				for (var i=0; i<$scope.shopList.length;i++) {
					allPrice += $scope.shopList[i].price * $scope.shopList[i].num;
				}
				return allPrice;
				}
				//总数
				$scope.allNum=function(){
					var allshu=0;
					for (var i = 0; i < $scope.shopList.length; i++) {
						allshu += $scope.shopList[i].num;
					}
					return allshu;
				}
				//移除
				$scope.remove=function(index){
					if(confirm("确定移除吗？")){
						$scope.shopList.splice(index,1);
					}
				};
				// 清空购物车
				$scope.removeAll = function(){
				if(confirm('确定清空购物车')){
					$scope.shopList=[];
						}
				};
			
			});
		</script>
	</head>
	<body ng-app="myapp" ng-controller="myctrl">
		<table border="1">
			<tr ng-repeat="item in shopList">
				<td>{{item.name}}</td>
				<td>{{item.price}}</td>
				<td><button ng-click="reduce($index)">-</button></td>
				<td><input type="text" ng-model="item.num" ng-change="change($index)"></td>
				<td><button ng-click="add($index)">+</button></td>
				<td>{{item.price * item.num}}</td>
				<td><button ng-click="remove($index)">移除</button></td>
				</tr>
			</table>
		总价:<span ng-bind="allSum()"></span>  总数:<span ng-bind="allNum()"></span>
			<button class="btn btn-warning" ng-click="removeAll()">清空购物车</button>
				
	</body>
</html>