二级联动

最新推荐文章于 2019-10-11 10:56:31 发布

不大二叔叔

最新推荐文章于 2019-10-11 10:56:31 发布

阅读量175

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_41946491/article/details/79798556

本文介绍了一个使用AngularJS实现的订单管理系统，该系统包括订单展示、筛选、排序、新增及批量删除等功能，并通过Ajax技术实现了前后端的数据交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<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">
			//初始化一个id值---全局变量
			var i = 2000;
			var app = angular.module("myapp", []).controller("myctrl", function($scope, $http) {
				//1.获取展示的订单数据
				$http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=goodstest").then(function(success) {
					$scope.goods = success.data;
					//alert($scope.goods.length);
				})
				//2.获取二级联动的数据
				$http.get("addr.json").then(function(success) {
					$scope.addr = success.data;
					//alert($scope.addr.length);
				})
				//3.声明状态值,,,记录添加表单的显示和隐藏
				$scope.flag_add = false;
				//改变省份,,,切换里面的城市
				$scope.changeProvince = function() {
					$scope.select_city = $scope.select_province.citys[0];
				}
				//4.添加数据---验证信息
				$scope.save = function() {
					i++;
					//4.0清空提示信息
					$(".t_span").html("");
					//4.1获取到输入的值
					var gname = $scope.gname;
					var uname = $scope.uname;
					var tel = $scope.tel;
					var price = $scope.price;
					var province = $scope.select_province.province;
					var city = $scope.select_city.city;
					//alert(city);
					//4.2进行验证
					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;
					}
					//4.3添加数据
					$scope.goods.push({
						id: i,
						gname: gname,
						uname: uname,
						tel: tel,
						price: price,
						city: city,
						regdate: new Date(),
						state: "已发货"
					})
					//4.4隐藏表单
					$scope.flag_add = false;
				}
				//5.全选,全不选
				$scope.changeChecked = function() {
					for(var i = 0; i < $scope.goods.length; i++) {
						$scope.goods[i].check = $scope.ischeck
					}
				}
				//6.批量删除
				$scope.delAll = function() {
					for(var i = 0; i < $scope.goods.length; i++) {
						if($scope.goods[i].check && $scope.goods[i].state == "已发货") {
							$scope.goods.splice(i, 1);
							i--;
						}else{
							//如果有未发货被选中,,,点击删除以后,状态值改变成false
							$scope.goods[i].check=false;
							$scope.ischeck = false;
						}
					}
				}
			})
		</script>
	</head>

	<body ng-app="myapp" ng-controller="myctrl">
		<button ng-click="flag_add=true">新增订单</button>
		<button ng-click="delAll()">批量删除</button>
		<input type="text" ng-model="select_name" placeholder="按名称查询" />
		<input type="text" ng-model="select_tel" placeholder="按手机号查询" />
		<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-change="changeChecked()" ng-model="ischeck" /></td>
				<td>id<button ng-click="px='id';aa=!aa">排序</button></td>
				<td>商品名</td>
				<td>用户名</td>
				<td>手机号</td>
				<td>价格<button ng-click="px='price';aa=!aa">排序</button></td>
				<td>城市</td>
				<td>下单时间<button ng-click="px='regdate';aa=!aa">排序</button></td>
				<td>状态</td>
			</tr>
			<tr ng-repeat="g in goods|filter:{'gname':select_name,'tel':select_tel,'state':state}|orderBy:px:aa">
				<td><input type="checkbox" ng-model="g.check" /></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:ss"}}</td>
				<td>
					<span ng-show="g.state=='已发货'" style="background-color: green;">{{g.state}}</span>
					<button ng-show="g.state=='未发货'" ng-click="g.state='已发货'" style="background-color: yellow;">{{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-model="select_province" ng-init="select_province=addr[0]" ng-options="item.province for item in addr" ng-change="changeProvince()"></select>
				<select ng-model="select_city" ng-init="select_city=select_province.citys[0]" ng-options="item2.city for item2 in select_province.citys"></select><br />
				<button ng-click="save()">保存</button>
			</fieldset>
		</form>

	</body>

</html>