AngularJs实现购物车

最新推荐文章于 2019-06-13 19:15:20 发布

狗-蛋

最新推荐文章于 2019-06-13 19:15:20 发布

阅读量183

点赞数

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

本文链接：https://blog.csdn.net/qq_41286390/article/details/79063705

版权

混合开发专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			table{
				width: 600px;
			}
			
			//表格隔行换色
			table tr:nth-child(even){
				background-color: cornsilk;
			}
			
			table tr:nth-child(odd){
				background-color: cadetblue;
			}
		</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("Mp",[]);
			app.controller("MyCtrl",function($scope){
//				var date1 = new Date("2017-11-20 09:32:21");
//				var date2 = new Date("2017-11-21 09:32:21"); 
//				var date3 = new Date("2017-11-22 09:32:21"); 
				
			
				//定义数据
				$scope.goods = [{
					name:"云南白药",
					num:100,
					address:"云南",
					price:19.9,
					data:new Date()
				},{
					name:"999",
					num:30,
					address:"北京",
					price:12.5,
					data:new Date()
				},{
					name:"感康",
					num:20,
					address:"河北",
					price:16.6,
					data:new Date().toLocaleString()
				}];
				
				//定义辅助变量
				$scope.sel = "";
				$scope.orderBykey = "";
				$scope.flag = false;
				$scope.newname = "";
				$scope.newnum = "";
				$scope.newaddress = "";
				$scope.newprice = "";
				$scope.pp = "添加";
				
				
				//入库
				$scope.show = function(){
					$scope.pp = "添加";
					//显示或者不显示
					$scope.flag = !$scope.flag;
				}
				
				//添加的事件
				$scope.add = function(){
					if($scope.pp == "添加"){
						
				
					if(main()){
						//创建一个对象
						var good = {
						name:$scope.newname,
						num:$scope.newnum,
						address:$scope.newaddress,
						
						price:$scope.newprice,
					
						data:new Date()
					}
					
					//添加到表格中
					$scope.goods.push(good);
					
					}else{
						alert("添加失败");
					}
						}else{
							//修改
							$scope.goods[$scope.upai].name = $scope.newname;
							$scope.goods[$scope.upai].num = $scope.newnum;
							$scope.goods[$scope.upai].address = $scope.newaddress;
							$scope.goods[$scope.upai].price = $scope.newprice;
							
							
						}
				}
				
				//删除
				$scope.del = function($index){
					$scope.goods.splice($index,1);
				}
				
				//表单验证
				function main(){
					return check_Null("name","商品名称")
					&&check_Null("num","商品数量")
					&&check_Null("address","地址")
					&&check_Null("price","价格");
				}
				
				//验证不为空
				function check_Null(id,name){
					var v = $("#"+id).val();
					if(v!=null&&v.trim()!=""){
						return true;
					}else{
						alert(name+"不能为空");
						return false;
					}
				}
				
				//点击修改按钮让其回显
				$scope.upa = function($index){
					$scope.upai = $index;
					$scope.pp = "修改";
					if($scope.pp == "修改"){ 
						$scope.newname=$scope.goods[$index].name;
						$scope.newnum=$scope.goods[$index].num;
						$scope.newaddress=$scope.goods[$index].address;
						$scope.newprice=$scope.goods[$index].price;
					}
				}
				
				
				//批量删除
				$scope.pl = function(){
					var p = $("input[type='checkbox']:checked");
					
					for(var i = 0;i<p.length;i++){
						p[i].parentNode.parentNode.remove();
					}
				}
				
				//结算总计
				$scope.allprice = function(){
					var all = 0;
					for(var i=0;i<$scope.goods.length;i++){
						all += $scope.goods[i].price*$scope.goods[i].num;
					}
					return all;
				}
				
			})
		</script>
	</head>
	<body ng-app="Mp" ng-controller="MyCtrl">
		<center>
			<div style="width: 600px; background-color: blanchedalmond;">
			<input type="text" ng-model="sel" placeholder="输入关键字搜索..." style="border-radius: 6px; float: left;"/>
			
			<input type="button" ng-click="show()" value="入库" style="background-color: chartreuse; float: right;"/>
			
			
			<select ng-model="orderBykey" style="float: right; margin-right: 20px;">
				<option selected="selected">--请选择--</option>
				<option value="price">价格升序</option>
				<option value="-price">价格降序</option>
				<option value="num">数量升序</option>
				<option value="-num">数量降序</option>
			</select>
			<input type="button" value="批量删除" ng-click="pl()" style="background-color: chartreuse; float: right; margin-right: 20px;"/>
			</div><br /><br />
			<table border="1">
				<tr style="background-color: darkslategray;">
					<th>
						<input type="checkbox" ng-model="a"/>
					</th>
					<th>货物名称</th>
					<th>货物数量</th>
					<th>货物产地</th>
					<th>货物单价</th>
					<th>货物入库日期</th>
					<th>操作</th>
				</tr>
				<tr ng-repeat="g in goods | filter:{name:sel} | orderBy : orderBykey">
					<td>
						
							<input type="checkbox" id="ck" ng-model="a"/>
						
					</td>
					<td>{{g.name}}</td>
					<td>
						<input type="button" value="-" ng-click="g.num = g.num-1"/>
						{{g.num}}
					<input type="button" value="+" ng-click="g.num = g.num+1"/>
					</td>
					<td>{{g.address}}</td>
					<td>{{g.price | currency:"￥："}}</td>
					<td>{{g.data}}</td>
					<td>
						<input type="button" value="删除" ng-click="del($index)"/>
						<input type="button" value="修改" ng-click="upa($index)"/>
					</td>
				</tr>
			</table><br /><br /><br />
			<form ng-show="flag">
				姓名：<input type="text" ng-model="newname" id="name"/><br /><br />
				数量：<input type="text" ng-model="newnum" id="num"/><br /><br />
				货物产地：<input type="text" ng-model="newaddress" id="address"/><br /><br />
				货物单价：<input type="number" ng-model="newprice" id="price"/><br /><br />
				<input type="button" value="{{pp}}" ng-click="add()"/>
			</form><br /><br />
			<p>{{allprice()}}</p>
		</center>
	</body>
</html>

狗-蛋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJs实现购物车

table{ width: 600px; } //表格隔行换色 table tr:nth-child(even){ background-color: cornsilk; } table tr:nth-child(odd){ background-color: cadetblue; } var
复制链接

扫一扫

专栏目录