angular 基本购物车 (添加删除修改)

最新推荐文章于 2019-06-11 15:57:18 发布

xujiuba

最新推荐文章于 2019-06-11 15:57:18 发布

阅读量262

点赞数

分类专栏：混合开发文章标签： ngular 基本购物车混合开发

本文链接：https://blog.csdn.net/xujiuba/article/details/79061289

版权

混合开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table tr:nth-child(even){
				background: #EEEEEE;
			}
			table tr:nth-child(add){
				background: #FFFFFF;
			}
			
		</style>
		<script type="text/javascript" src="js/angular.js" ></script>
		<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
		<script>
			var app=angular.module("myApp",[]);
			app.controller("myCtrl",function($scope){
				//准备数据
				var date1 = new Date("2018-1-09 09:09:09");
				var date2 = new Date("2018-1-10 10:10:10");
				var date3 = new Date("2018-1-01 21:21:21");
				var date4 = new Date("2018-1-05 13:13:31");
				//初始化数据
				$scope.goods = [{
					name:"云南白药",
					num:1,
					address:"云南",
					price:19.9,
					date:date1
				},{
					name:"999感冒灵",
					num:1,
					address:"北京",
					price:12.5,
					date:date2
				},{
					name:"感康",
					num:1,
					address:"河北",
					price:16.6,
					date:date3
				},{
					name:"可可",
					num:1,
					address:"澳大利亚",
					price:99,
					date:date4
				}];
				//搜素条件
				$scope.search = "";
				$scope.orderByKey = "";
				//入库相关
				$scope.ifFlag = false;
				//点击 入库 是否显示下方的输入区域
				$scope.ifAdd = function(){
					$scope.ifFlag = !$scope.ifFlag;
				}
				//添加商品
				$scope.newname = "";
				$scope.newnum = "";
				$scope.newprice = "";
				$scope.newaddress = "";
				//
				$scope.updateIndex = 0;
				$scope.addGood = function(){
					if($("#btn1").val() =="添加"){
						//创建good对象
						var good = {
							name:$scope.newname,
							num:$scope.newnum,
							price:$scope.newprice,
							address:$scope.newaddress,
							date:new Date()
						};
						//此次添加，如果table没有出现，先显示
						if($scope.goods.length == 0){
							$scope.showTitle = true;
						};
						$scope.goods.push(good);
						//添加完后,自动隐藏输入区域
						$scope.ifFlag = false;
					}else{
						$scope.goods[$scope.updateIndex].name = $scope.newname;
						$scope.goods[$scope.updateIndex].num = $scope.newnum;
						$scope.goods[$scope.updateIndex].price = $scope.newprice;
						$scope.goods[$scope.updateIndex].address = $scope.newaddress;
					}
				}
				//删除商品
				$scope.showTitle = true;
				$scope.deleteGood = function($index){
					$scope.goods.splice($index,1);
					if($scope.goods.length == 0){
						$scope.showTitle = false;
					};
				}
				//修改商品
				$scope.updateGood = function($index){
					$scope.updateIndex = $index;
					//显示修改区域
					$scope.ifFlag = true;
					$("#btn1").val("修改");
					
					$scope.newname = $scope.goods[$index].name;
					$scope.newnum = $scope.goods[$index].num;
					$scope.newprice = $scope.goods[$index].price;
					$scope.newaddress = $scope.goods[$index].address;
				}
				//总计
				$scope.allPrice = 0;
				$scope.getAllPrice = function(){
					var count = 0;
					//遍历goods 得到索引
					for(index in $scope.goods){
						count += $scope.goods[index].price*$scope.goods[index].num;
					}
					$scope.allPrice = count;
				}
				//调用计算总价的函数
				$scope.getAllPrice();
				//减号
				$scope.jian1 = function($index){
					$scope.goods[$index].num = $scope.goods[$index].num-1;
					//调用计算总价的函数
					$scope.getAllPrice();
				}
			});
		</script>
	</head>
	<body ng-app="myApp" ng-controller="myCtrl">
		<center>
			<h3>商品信息</h3>
			<input type="text" ng-model="search" placeholder="请输入搜素关键字" />
			<select ng-model="orderByKey">
				<option value="">--请选择--</option>
				<option value="num">数量升序</option>
				<option value="-num">数量降序</option>
				<option value="price">价格升序</option>
				<option value="-price">价格降序</option>
			</select>
			<input type="button" value="入库" ng-click="ifAdd();" /><br /><br />
			<table border="1px" ng-show="showTitle">
				<tr style="background-color: dimgray;">
					<th>商品序号</th>
					<th>商品名称</th>
					<th width="120" ng-click="orderByKey='num'">商品数量</th>
					<th width="80" ng-click="orderByKey='price'">商品价格</th>
					<th>商品地址</th>
					<th>商品日期</th>
					<th>操作</th>
				</tr>
				<tr ng-repeat="g in goods | orderBy:orderByKey | filter:{name:search}">
					<td>{{$index}}</td>
					<td>{{g.name}}</td>
					<td>  

						<input type="button" value="-" ng-click="g.num=g.num-1; getAllPrice();"/>
						{{g.num}}
						<input type="button" value="+" ng-click="g.num=g.num+1; getAllPrice();"/>
					</td>
					<td>{{g.address}}</td>
					<td ng-dblclick="g.flag=false">
						<span ng-show="g.flag">{{g.price}}</span>
						<input ng-hide="g.flag" ng-model="g.price" ng-change="getAllPrice();" ng-blur="g.flag=true;" type="text" />
					</td>
					<td>{{g.date | date:"yyyy-MM-dd hh:mm:ss"}}</td>
					<td>
						<input type="button" value="修改" ng-click="updateGood($index);" />
						<input type="button" value="删除" ng-click="deleteGood($index);" />
					</td>
				</tr>
			</table><br />
			总价: <span>{{allPrice | number:2}}</span>
			<div ng-show="ifFlag">
				商品名称: <input type="text" placeholder="输入商品名称" ng-model="newname" /><br />
				商品数量: <input type="text" placeholder="输入商品数量" ng-model="newnum" /><br />
				商品价格: <input type="text" placeholder="输入商品价格" ng-model="newprice" /><br />
				商品地址: <input type="text" placeholder="输入商品地址" ng-model="newaddress" /><br /><br />
				         <input type="button" id="btn1" value="添加" ng-click="addGood();" />
			</div>
		</center>
	</body>
</html>