Angular购物车应用-优快云博客

本文链接：https://blog.youkuaiyun.com/Androidoux98/article/details/79808541
<!DOCTYPE html>
<html ng-app="app">
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/angular.min.js" ></script>
		<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
		<script>
		var app = angular.module("app",[]);
		app.controller("de",function($scope){
			$scope.datas = [
				 {
			        "count": 3,
			        "id": 2001,
			        "price": 8699,
			        "shopname": "iPhoneX"
			    },
			    {
			        "count": 4,
			        "id": 2002,
			        "price": 6699,
			        "shopname": "iPhone8"
			    },
			    {
			        "count": 2,
			        "id": 2003,
			        "price": 5699,
			        "shopname": "iPhone7p"
			    },
			    {
			        "count": 1,
			        "id": 2004,
			        "price": 5099,
			        "shopname": "iPhone7"
			    }
			];
			$scope.sname = "";
			$scope.orderkey = "id";
//			--
			$scope.jian = function($index){
				$scope.datas[$index].count--;
				if($scope.datas[$index].count<=0){
					var f = confirm("删除");
					if (f) {
						$scope.datas.splice($index,1);
					}
				}
			}
			//			++
			$scope.jia = function($index){
				$scope.datas[$index].count++;
			}
			//删除
			$scope.del = function($index){
				$scope.datas.splice($index,1);
			}
			//总数量
			$scope.counts = function(){
				var z = 0;
				for (var i=0;i<$scope.datas.length;i++) {
					z+=$scope.datas[i].count;
				}
				return z;
			}
			//总价
			$scope.allprice = function(){
				var p = 0;
				for (var i=0;i<$scope.datas.length;i++) {
					p+=$scope.datas[i].price * $scope.datas[i].count;
				}
				return p;
			}
			//选框
			$scope.cks = function($index){
				$scope.datas[$index].ck =!$scope.datas[$index].ck;
			}
			//批量删除
			$scope.pldel = function($index){
				var s = confirm("确定删除吗？");
				if (s) {
					if($scope.ck){
						for (var i=$scope.datas.length-1;i>=0;i--) {
							$scope.datas.splice(i,1);
						}
						$scope.ck =!$scope.ck;
					}
				}
				for (var i=$scope.datas.length-1;i>=0;i--) {
					if($scope.datas[i].ck){
						$scope.datas.splice(i,1);
					}
				}
			}
			//清除购物车
			$scope.alldel = function($index){
				for (var i=$scope.datas.length;i>=0;i--) {
					$scope.datas.splice(i,1);
				}
			}
			//添加
			$scope.add = function(){
				$scope.datas.push({
					id:$scope.newid,
					shopname:$scope.newname,
					count:$scope.newcount,
					price:$scope.newprice
				});
				
			}
			$scope.addsh = true;
			$scope.updatesh = false;
			//修改
			$scope.update = function($index){
				$scope.addsh = false;
				$scope.updatesh = true;
				$scope.newindex = $index;
				$scope.newsid = $scope.datas[$index].id;
				$scope.newsname = $scope.datas[$index].shopname;
				$scope.newscount = $scope.datas[$index].count;
				$scope.newsprice = $scope.datas[$index].price;
			}
			$scope.updateshe = function($index){
				$scope.addshe = true;
				$scope.updatesh = false;
				$scope.datas[$scope.newindex].id = $scope.newsid;
				$scope.datas[$scope.newindex].shopname = $scope.newsname;
				$scope.datas[$scope.newindex].count = $scope.newscount;
				$scope.datas[$scope.newindex].price = $scope.newsprice;
				$scope.newsid = "";
				$scope.newsname = "";
				$scope.newscount = "";
				$scope.newsprice = "";
			}
		
		});
	</script>
		<style>
			.box{
				margin: 0 auto;
				width: 600px;
				height: 500px;
				background: #f00;
			}
		</style>
	</head>
	<body ng-controller="de">
		<input type="text" placeholder="根据name进行查询" style="width: 200px; height: 20px;text-align: center;border-radius:10px ;margin: 0 auto;" ng-model="sname" />
		<select ng-model="orderkey">
			<option value="">升序</option>
			<option value="-">降序</option>
		</select>
		<br />
			<table border="1" cellpadding="0" cellspacing="0">
				<tr>
					<td><input type="checkbox" ng-model="ck" /></td>
					<td>产品编号</td>
					<td>产品名称</td>
					<td>产品数量</td>
					<td>产品单价</td>
					<td>产品总价</td>
					<td>操作</td>
					<td>操作</td>
				</tr>
				<tr ng-repeat="x in datas | orderBy:orderkey | filter:{shopname:sname}">
					<td><input type="checkbox" ng-checked="ck" ng-click="cks($index)"</td>
					<td>{{x.id}}</td>
					<td>{{x.shopname}}</td>
					<td>
						<input type="button" value="-" ng-click="jian($index)" /><input type="number" ng-model="x.count"/><input type="button" value="+" ng-click="jia($index)" />
					</td>
					<td>{{x.price}}</td>
					<td>{{x.price*x.count}}</td>
					<td><input type="button" value="删除" ng-click="del($index)"</td>
					<td><input type="button" value="修改" ng-click="update($index)"</td>
				</tr>
			</table>
			<br />
			<br />
			总数量:{{counts()}}
			<br />
			总价:{{allprice()}}
			<br />
			<input type="button" value="清除购物车" ng-click="alldel()" />
			<br />
			<input type="button" value="批量删除" ng-click="pldel()" />
			<br />
			<div ng-show="addsh" style="width: 300px; height: 300px;
			text-align: center;">
			-------------添加商品-------------<br />
			商品编号:<input type="text" ng-model="newid" /><br />
			商品名称:<input type="text" ng-model="newname" /><br />
			商品数量:<input type="number" ng-model="newcount" /><br />
			商品单价:<input type="text" ng-model="newprice" /><br />
			<input type="button" value="添加" ng-click="add()" />
		</div>
		<div ng-show="updatesh" style="width: 300px; height: 300px;
			text-align: center;">
			-----------修改商品-----------<br />
			商品编号:<input type="text" ng-model="newsid" /><br />
			商品名称:<input type="text" ng-model="newsname" /><br />
			商品数量:<input type="number" ng-model="newscount" /><br />
			商品单价:<input type="text" ng-model="newsprice" /><br />
			<input type="button" value="修改" ng-click="updateshe()" />
		</div>
			
	</body>
	
</html>
增删改查
