发货增删改过滤综合

最新推荐文章于 2022-08-22 12:21:01 发布

sui_yz

最新推荐文章于 2022-08-22 12:21:01 发布

阅读量190

点赞数

本文链接：https://blog.csdn.net/sui_yz/article/details/79043159

版权

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#container input{
				display: block;
			}
		</style>
		<script src="js/angular.min.js"></script>
		<!--1  创建控制器===>1 创建数据  2.视图展示 -->
		<script>
			angular.module("gaoyn", [])
				.controller("democ", function($scope) {
					//控制添加区域是否隐藏
					
					
					$scope.goods = [];
					for(var i = 0; i < 5; i++) {
						var g = {
							ck: false,
							id: i + 10,
							gname: 'oppo' + i,
							uname: '张飞' + i,
							tel: "13522746372",
							price: 1000 + i,
							city: '北京',
							regdate: new Date("2017-7-" + (i + 1)),
							state: '未发货'
						};
						var g1 = {
							ck: false,
							id: i + 1,
							gname: 'oppo' + i,
							uname: '赵云' + i,
							tel: "13522746372",
							price: 1000 + i,
							city: '上海',
							regdate: new Date("2017-1-" + (i + 1)),
							state: '已发货'
						};
						$scope.goods.push(g);
						$scope.goods.push(g1);
					}

					$scope.ms = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
					$scope.citys = ["北京", "上海"];

					$scope.save = function() {
						//处理商品名中是否含有米-->则替换
						var reg_=/米/g;
						var suname=$scope.add_gname.replace(reg_,"*");
						console.log(suname,"++++");
						var g1 = {
							ck: false,
							id: $scope.goods.length + 1, //新增id,id不能重复
							gname: suname,
							uname: $scope.add_uname,
							tel: $scope.add_tel,
							price: $scope.add_price,
							city: $scope.add_city,
							regdate: new  Date(),
							state: '未发货'
						};
						$scope.goods.push(g1);
						$scope. showsave=false;  //让添加区域进行隐藏

					}
					//批量发货
					$scope.fhall = function() {
						for(var i = 0; i < $scope.goods.length; i++) {
							if($scope.goods[i].ck) {
								$scope.goods[i].state = '已发货';
							}
						}
					}
					$scope.delall = function() {
						for(var i = 0; i < $scope.goods.length; i++) {
							if($scope.goods[i].ck) {
								$scope.goods.splice(i, 1);
								i--; //防止隔行删除
							}
						}
					}

					//设置月份的开始和结束
					$scope.yue = function(m) {
						var currentd = m.getMonth() + 1; //0-11

						//获取开始日期
						var start = $scope.startm;

						//获取结束月份
						var end = $scope.endm;
						if(start == "") start = undefined;
						if(end == "") end = undefined;
						if(start == undefined && end != undefined) {
							if(currentd <= end) {
								return true;
							}
						} else if(start != undefined && end == undefined) {
							if(currentd >= start) {
								return true;
							}
						} else if(start == undefined && end == undefined) {
							return true;
						} else if(currentd >= start && currentd <= end) {
							return true;
						}

						return false;
					}

				})
		</script>
		<style>
			tbody tr:nth-child(2n) {
				background-color: #999;
			}
			
			thead th {
				background: deepskyblue;
			}
		</style>
	</head>

	<body ng-app="gaoyn" ng-controller="democ">
		<input type="text" placeholder='请输入查询的姓名' ng-model="sname" />
		<input type="text" placeholder='手机号搜索' ng-model="stel" />
		<select ng-model="scity">
			<option value="">选择城市</option>-
			<option ng-repeat="m in citys">{{m}}</option>
		</select>
		<select ng-model="sstate">
			<option value="">选择状态</option>-
			<option>已发货</option>
			<option>未发货</option>
		</select>
		<select ng-model="startm">
			<option value="">开始月份</option>-
			<option ng-repeat="m in ms">{{m}}</option>
		</select>
		<select ng-model="endm">
			<option value="">结束月份</option>
			<option ng-repeat="m in ms">{{m}}</option>
		</select>
		<p>
			<button ng-click="showsave=true">新增订单</button>
			<button ng-click="fhall()">批量发货</button>
			<button ng-click="delall()">批量删除</button> 敏感字:米(商品名)->替换成*
		</p>
		<table border="1px">
			<thead>
				<tr>
					<th><input type="checkbox" ng-model="ckis" /></th>
					<th>id</th>
					<th>商品名</th>
					<th>用户名</th>
					<th>手机号</th>
					<th>价格</th>
					<th>城市</th>
					<th>下单时间</th>
					<th>状态</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="g in goods|filter:{uname:sname,tel:stel,city:scity,state:sstate}" ng-show="yue(g.regdate)">
					<td><input type="checkbox" ng-model="g.ck" /> </td>
					<td>{{g.id}}</td>
					<td>{{g.gname}} </td>
					<td>{{g.uname}} </td>
					<td>{{g.tel}} </td>
					<td>{{g.price|currency:'¥'}}</td>
					<td>{{g.city}}</td>
					<td>{{g.regdate|date:'MM-dd hh:mm'}}</td>
					<td>
						<span ng-if="g.state=='未发货'">
							
						<a href="#" ng-click="g.state='已发货'">{{g.state}} </a>	
						</span>
						<span ng-if="g.state=='已发货'">
							已发货
						</span>

					</td>
					<td><button>修改</button><button>删除</button></td>
				</tr>
			</tbody>
		</table>
		<div ng-show="showsave" id="container">
			<input ng-model="add_gname" placeholder="请输入商品名" />
			<input ng-model="add_uname" placeholder="请输入用户名" />
			<input ng-model="add_tel" placeholder="请输入电话" type="tel" />
			<input ng-model="add_price" placeholder="请输入价格" type="number" />
			<select ng-model="add_city">
				<option value="">请输入城市</option>
				<option>北京</option>
				<option>上海</option>
			</select>
			<button ng-click="save()">保存</button>
		</div>
	</body>

</html>

sui_yz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
发货增删改过滤综合

#container input{ display: block; } 1 创建数据 2.视图展示 --> angular.module("gaoyn", []) .controller("democ", function($scope) { //控制添加区域是否隐藏 $scope.goods = []
复制链接

扫一扫