agljs

最新推荐文章于 2024-05-08 14:29:47 发布
Androidoux98
最新推荐文章于 2024-05-08 14:29:47 发布
阅读量343
点赞数
本文链接：https://blog.youkuaiyun.com/Androidoux98/article/details/79840770
版权
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>混合开发</title>
		<script type="text/javascript" src="js/angular.min.js" ></script>
		<script>
			var app = angular.module("myApp",[]);
			app.controller("myCtrl",function($scope,$http){
				$http.get("data.json").then(function(response){
					$scope.goods = response.data;
				})
				$scope.pros = [{
					pro : "北京",
					children : ["西二旗","西城","东城"]
				},{
					pro : "河南",
					children : ["郑州","洛阳","驻马店"]
				}]
				
				$scope.searchKey = "";
				$scope.citys = $scope.pros[0].children;
				$scope.changcitys = function(pro){
					$scope.citys = pro.children;
				}
				if ($scope.status != 0) {
					$scope.status = "已发货";
				} else {
					$scope.status = "发货";
				}
				$scope.add = function(){
					var stus = {};
					if ($scope.name == null || $scope.name == "") {
						$scope.sp_name = true;
						return;
					}else {
						$scope.sp_name = false;
					}
					if ($scope.price < 0 || $scope.price == null) {
						$scope.sp_price = true;
						return;
					}else{
						$scope.sp_price = false;
					}
					if ($scope.number < 0 || $scope.number == null) {
						$scope.sp_num = true;
						return;
					}else{
						$scope.sp_num = false;
					}
					if ($scope.username == null || $scope.username == "") {
						$scope.sp_vip = true;
						return;
					}else {
						$scope.sp_vip = false;
					}
					var i = 0;
					$scope.date=new Date().toLocaleTimeString();
					time = new Date("2018-04-04 "+(i+1));
					stus.address = $scope.s1.pro + $scope.s2
					stus.name = $scope.name;
					stus.price = $scope.price;
					stus.number = $scope.number;
					stus.username = $scope.username;
					stus.status = 0;
					stus.orderTime = new Date;
					$scope.goods.push(stus);
					$scope.showAdd = false;
				}
				$scope.All = function(){
					for (var i = 0; i < $scope.goods.length; i++) {
						$scope.goods[i].ck = $scope.check;
					}
				}
				$scope.b_del = function(){
					for (var i = 0; i < $scope.goods.length; i++) {
						if ($scope.goods[i].ck) {
							$scope.goods.splice(i,1);
							i--;
						}
					}
				}
			});
		</script>
		<style>
			span{
				color: red;
			}
			td{
				width: 100px;
				height: 50px;
				text-align: center;
			}
			.white{
				background-color: white;
			}
			.gray{
				background-color: ghostwhite;
			}
			.query{
				position: absolute;
				left: 100px;
			}
			.btn{
				position: absolute;
				right: 200px;
			}
			.btn2{
				position: absolute;
				right: 100px;
			}
		</style>
	</head>
	<body ng-app="myApp" ng-controller="myCtrl">
		<input type="text" placeholder="按商品名称搜索" ng-model="searchKey" class="query"/>
		<input type="button" value="添加商品" ng-click="showAdd = !showAdd" style="background-color: greenyellow;" class="btn"/>
		<input type="button" value="批量删除订单" ng-click="b_del()" style="background-color: red;" class="btn2"/><br />
		<div ng-show="showAdd">
			<fieldset>
				<legend>添加商品</legend>
					<center>
						商品名称：<input type="text" ng-model="name" /><span ng-show="sp_name">*非空</span><br />
						商品价格：<input type="number" ng-model="price" /><span ng-show="sp_price">*必须为数字且不能小于0</span><br />
						商品数量：<input type="number" ng-model="number" /><span ng-show="sp_num">*必须为数字且不能小于0</span><br />
						会员名称：<input type="text" ng-model="username" /><span ng-show="sp_vip">*非空</span><br />
						收货地址：<select ng-init="s1=pros[0]" ng-model="s1" ng-options="s.pro for s in pros" ng-change="changcitys(s1)">
							<option>---请选择省份---</option>
						</select>
						— <select ng-init="s2=citys[0]" ng-model="s2" ng-options="c for c in citys">
							<option>---请选择市区---</option>
						</select>
						<input type="button" value="确认添加" ng-click="add()" />
					</center>
			</fieldset>
		</div><br />
		<center>
			<table border="1px" cellpadding="0" cellspacing="0">
				<tr style="background-color: gainsboro;">
					<td><input type="checkbox" ng-model="check" ng-click="All()"</td>
					<td>商品名称</td>
					<td>商品价格</td>
					<td>购买数量</td>
					<td>商品总计</td>
					<td>下单时间</td>
					<td>商品状态</td>
					<td>商品会员</td>
					<td>收货地址</td>
					<td>修改状态</td>
				</tr>
				<tr ng-repeat=" s in goods | filter : searchKey" class="{{$index%2? 'white':'gray'}}">
					<td><input type="checkbox" ng-model="s.ck" /></td>
					<td>{{s.name}}</td>
					<td>￥：{{s.price}}</td>
					<td>{{s.number}}</td>
					<td>￥：{{s.count = s.price * s.number}}</td>
					<td>{{s.orderTime | date : "yyyy-MM-dd hh:mm:ss"}}</td>
					<td>{{s.status}}</td>
					<td>{{s.username}}</td>
					<td>{{s.address}}</td>
					<td><button ng-click="fahuo">发货</button>
					</td>
				</tr>
			</table>
		</center>
	</body>
</html>