增伤改

最新推荐文章于 2023-07-24 17:22:53 发布
不大二叔叔
最新推荐文章于 2023-07-24 17:22:53 发布
阅读量147
点赞数
本文链接：https://blog.csdn.net/qq_41946491/article/details/79798591
版权
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.t_span {
				background-color: yellow;
			}
		</style>
		<script src="../../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var i = 2000;
			var app = angular.module("myapp", []).controller("myctrl", function($scope, $http) {
				//获取数据
				$http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=goodstest").then(function(success) {
					$scope.goods = success.data;
				})
				$scope.addr = [{
						"province": "辽宁",
						"citys": [{
								"city": "沈阳",
							},
							{
								"city": "大连",
							},
							{
								"city": "葫芦岛",
							},
							{
								"city": "抚顺",
							}
						]
					},
					{
						"province": "河北",
						"citys": [{
								"city": "唐山",
							},
							{
								"city": "秦皇岛",
							},
							{
								"city": "石家庄",
							},
							{
								"city": "保定",
							}
						]
					},
					{
						"province": "江苏",
						"citys": [{
								"city": "宿迁",
							},
							{
								"city": "扬州",
							},
							{
								"city": "南京",
							},
							{
								"city": "泰州",
							}
						]
					}
				];
				$scope.changeProvince = function() {
					$scope.select_city = $scope.select_province.citys[0];
				}
				//新增订单
				$scope.flag_add = false;
				$scope.save = function() {
					i++;
					$(".t_span").html("");
					var gname = $scope.gname;
					var uname = $scope.uname;
					var tel = $scope.tel;
					var price = $scope.price;
					var pro = $scope.select_province.province;
					var cit = $scope.select_city.city;
					if(gname == null || gname == "") {
						$("#gname_span").html("商品名称不能为空");
						return;
					}
					if(uname == null || uname == "") {
						$("#uname_span").html("用户名名称不能为空");
						return;
					}
					if(tel == null || tel == "") {
						$("#tel_span").html("电话不能为空");
						return;
					}
					if(price == null || price == "") {
						$("#price_span").html("价格不能为空");
						return;
					}
					if(pro == undefined && cit == undefined) {
						$("#addr_span").html("必须填写");
						return;
					}
					//alert(gname+"--"+uname+"--"+tel+"--"+price+"--"+pro+"--"+cit);
					//添加
					$scope.goods.push({
						gname: gname,
						city: pro,
						id: i,
						price: price,
						uname: uname,
						tel: tel,
						regdate: new Date(),
						state: "已发货"
					});
					//alert($scope.goods.length);
					$scope.flag_add = false;
				}
				//批量删除
				$scope.delAll = function() {
					for(var i = 0; i < $scope.goods.length; i++) {
						if($scope.goods[i].checked && $scope.goods[i].state == '已发货') {
							$scope.goods.splice(i, 1);
							i--;
						} else {
							$scope.goods[i].checked = false;
							$scope.ischecked = false;
						}
					}
				}
				//全选全不选
				$scope.change = function() {
					for(var i = 0; i < $scope.goods.length; i++) {
						$scope.goods[i].checked = $scope.ischecked
					}
				}

			})
		</script>
	</head>

	<body ng-app="myapp" ng-controller="myctrl">
		<button ng-click="flag_add=true">新增订单</button>
		<button ng-click="delAll()">批量删除</button>
		<input type="text" placeholder="按商品名称查询" ng-model="select_name" />
		<input type="text" placeholder="按手机号查询" ng-model="select_phone" />
		<select ng-model="state">
			<option value="">请选择</option>
			<option value="已">已发货</option>
			<option value="未">未发货</option>
		</select>
		<table border="1px" cellspacing="0" cellpadding="0" width="800px">
			<tr>
				<td><input type="checkbox" ng-model="ischecked" ng-change="change()" /></td>
				<td>id<button ng-click="px='id';sj=!sj">△</button></td>
				<td>商品名</td>
				<td>用户名</td>
				<td>手机号</td>
				<td>价格<button ng-click="px='price';sj=!sj">△</button></td>
				<td>城市</td>
				<td>下单时间<button ng-click="">△</button></td>
				<td>状态</td>
			</tr>
			<tr ng-repeat="g in goods|filter:{'gname':select_name,'tel':select_phone,'state':state}|orderBy:px:sj">
				<td><input type="checkbox" ng-model="g.checked" /></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-show="g.state=='已发货'" style="background-color: green;">{{g.state}}</span>
					<button ng-show="g.state=='未发货'" style="background-color: yellow;" ng-click="g.state='已发货'">{{g.state}}</button>
				</td>
			</tr>
		</table>
		<form ng-show="flag_add">
			<fieldset id="">
				<legend>添加订单信息</legend>
				商品名:<input type="text" ng-model="gname" /><span id="gname_span" class="t_span"></span><br /> 用户名:
				<input type="text" ng-model="uname" /><span id="uname_span" class="t_span"></span><br /> 手机号:
				<input type="text" ng-model="tel" /><span id="tel_span" class="t_span"></span><br /> 价格:
				<input type="text" ng-model="price" /><span id="price_span" class="t_span"></span><br /> 城市:
				<select ng-init="select_province=addr[0]" ng-model="select_province" ng-change="changeProvince()" ng-options="item.province for item in addr"></select>
				<select ng-init="select_city=select_province.citys[0]" ng-model="select_city" ng-options="city2.city for city2 in select_province.citys"><span id="addr_span" class="t_span"></span></select><br />
				<button ng-click="save()">保存</button>
			</fieldset>
		</form>
	</body>

</html>