修改购物车

最新推荐文章于 2022-05-22 15:56:36 发布

nijiadalinge

最新推荐文章于 2022-05-22 15:56:36 发布

阅读量334

点赞数

分类专栏：移动开发

本文链接：https://blog.csdn.net/NIJIADALINGE/article/details/79840820

版权

移动开发专栏收录该内容

58 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/包/angular.min.js" ></script>
		<script src="js/包/jquery-1.11.1.min.js"></script>

		<script>
			var app = angular.module("myApp", []);
			app.controller("myCtrl", function($scope, $http) {
				$http.get("http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce?uri=monthTest").then(function(response) {
					$scope.goods = response.data;
				});

				//添加
				$scope.add = function() {
					//创建一个对象
					var gd = {};
					gd.name = $scope.name;
					gd.price = $scope.price;
					gd.number = $scope.number;
					var shijian = new Date(); //获取当前时间
					gd.orderTime = shijian;
					gd.username = $scope.username;
					gd.address = $scope.pro + "-" + $scope.city;
					//添加之前的校验
					if(gd.name == "" || gd.name == null) {
						$("#yname").html("非空").css("color", "red");
					} else {
						$("#yname").html("");
					}
					var patrn = /^(-)?\d+(\.\d+)?$/;
					if(patrn.exec(gd.price) == null || gd.price == "" || gd.price <= 0) {
						$("#yprice").html("必须为数字且不能小于0").css("color", "red");
					} else {
						$("#yprice").html("");
					}
					if(patrn.exec(gd.number) == null || gd.number == "" || gd.number <= 0) {
						$("#ynumber").html("必须为数字且不能小于0").css("color", "red");
					} else {
						$("#ynumber").html("");
					}
					if(gd.username == "" || gd.username == null) {
						$("#yusername").html("非空").css("color", "red");
					} else {
						$("#yusername").html("");
					}
					if(gd.address == null || gd.address == "") {
						$("#yaddress").html("默认显示为：北京-西二旗").css("color", "red");
					} else {
						$("#yaddress").html("");				
					}
					gd.status = 0;//状态的添加
					//成功添加
					$scope.goods.push(gd);
				}

				//批量删除
				$scope.shan = function() {
					var ch = $("input[type=checkbox]:checked");
					for(var i = ch.length - 1; i >= 0; i--) {
						$scope.goods.splice(ch[i].value, 1);
					}
				}
				
				//点击发货按钮
				$scope.fa = function(index){
					$scope.goods[index].status = 1;
				}
			
			})

		</script>

	</head>

	<body ng-app="myApp" ng-controller="myCtrl">
		<center>
			<input type="text" placeholder="按商品名称搜索..." ng-model="queryByname" />          
			<input type="button" value="添加商品" ng-click="addGood=!addGood" style="background-color: chartreuse;"  />
			<input type="button" value="批量删除订单" ng-click="shan()" style="background-color: deeppink;" /><br /><br />

			<fieldset ng-show="addGood" style="width: 500px;">
				<legend>添加商品信息</legend>
				商品名称：<input type="text" ng-model="name" /><span id="yname"></span><br /> 商品价格：
				<input type="text" ng-model="price" /><span id="yprice"></span><br /> 商品数量：
				<input type="text" ng-model="number" /><span id="ynumber"></span><br /> 会员名称：
				<input type="text" ng-model="username" /><span id="yusername"></span><br /> 收货地址：
				<select id="pro" ng-init="pro='北京'" ng-model="pro" οnchange="getcitys()">
					<option>北京</option>
					<option>河南</option>
				</select>
				<select id="city" ng-init="city='西二旗'" ng-model="city">
					<option>西二旗</option>
					<option>东城</option>
					<option>西城</option>
					<option>郑州</option>
					<option>洛阳</option>
					<option>驻马店</option>
				</select><span id="yaddress"></span><br />
				<input type="button" value="确定添加" ng-click="add()" />
			</fieldset>

			<table border="1px">
				<tr>
					<td>
						<input type="checkbox" ng-model="checkAll" ng-click=""="zhuang()">
					</td>
					<td>商品名称</td>
					<td>商品价格</td>
					<td>购买数量</td>
					<td>商品总计</td>
					<td>下单时间</td>
					<td>商品状态</td>
					<td>商品会员</td>
					<td>收货地址</td>
					<td>修改状态</td>
				</tr>
				<tr ng-repeat="good in goods | filter:{name:queryByname}">
					<td>
						<span ng-if="good.status=='0'"><input type="checkbox"></span>
						<span ng-if="good.status=='1'"><input type="checkbox" ng-model="checkAll"></span>
						
					</td>
					<td>{{good.name}}</td>
					<td>{{good.price | currency}}</td>
					<td>{{good.number}}</td>
					<td>{{good.price * good.number | currency}}</td>
					<td>{{good.orderTime|date:"yyyy-MM-dd hh:mm:ss"}}</td>
					<td>
						<span ng-if="good.status=='0'">未发货</span>
						<span ng-if="good.status=='1'">已发货</span>
					</td>
					<td>{{good.username}}</td>
					<td>{{good.address}}</td>
					<td>
						<span ng-if="good.status=='0'"><input type="button" value="发货" ng-click="fa($index)" style="background-color: aqua;"></span>
						<span ng-if="good.status=='1'">发货</span>	
					</td>
				</tr>
			</table>

		</center>

		<script>
			var datas = [{
				pro: "北京",
				citys: ["东城", "西城", "西二旗"]
			}, {
				pro: "河南",
				citys: ["郑州", "洛阳", "驻马店"]
			}];

			function getcitys() {
				$("#city option").remove();
				var p = $("#pro").val();
				for(var i in datas) {
					if(datas[i].pro == p) {
						data_citys = datas[i].citys;
						break;
					}
				}
				for(var i in data_citys) {
					var op = $("<option>" + data_citys[i] + "</option>")
					$("#city").append(op);
				}
			}
		</script>
		<!--{{goods}}-->
	</body>

</html>

nijiadalinge

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
修改购物车

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="js/包/angular.min.js" &
复制链接

扫一扫