Angular Js如何实现发货

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="angular.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<script type="text/javascript">
		var app=angular.module("myapp",[]).controller("myctrl",function ($scope,$http) {
			$http.get("good.json").then(function (success) {
				$scope.good=success.data;
			});
			$http.get("addr.json").then(function (success) {
				$scope.addr=success.data;
				$scope.province=$scope.addr[0];
				$scope.city=$scope.province.citys[0];
			});
			
			$scope.flag=false;
			$scope.ckchange=function () {
				for (var i = 0; i < $scope.good.length; i++) {
					$scope.good[i].ck=$scope.checked;
				}
			}
			$scope.plsc=function () {
				for (var i = 0; i < $scope.good.length; i++) {
					if($scope.good[i].ck&&$scope.good[i].state=='已发货'){
						$scope.good.splice(i,1);
						i--;
					}else{
						$scope.good[i].ck=false;
						$scope.checked=false;
					}
				}
			}
			$scope.change=function () {
				$scope.city=$scope.province.citys[0];
			}
			$scope.bc=function () {
				$(".s1").val("");
				var gname=$scope.gname;
				var uname=$scope.uname;
				var tel=$scope.tel;
				var price=$scope.price;
				var province=$scope.province.province;
				if(gname==""||gname==null){
					$("#s1").text("商品名不能为空");
					return;
				}else{
					$("#s1").text();
				}
				if(uname==""||uname==null){
					$("#s2").text("用户名不能为空");
					return;
				}else{
					$("#s2").text("");
				}
				if(tel==""||tel==null){
					$("#s3").text("电话不能为空");
					return;
				}else{
					$("#s3").text("");
				}
				if(price==""||price==null){
					$("#s4").text("价格不能为空");
					return;
				}else{
					$("#s4").text("");
				}
				$scope.good.push({
					 city: province,
       				 gname: gname,
        			 id: 2001,
       				 price: price,
       				 regdate: new Date(),
       				 state: "未发货",
        			 tel: tel,
       				 uname: uname
				});
				
				
				$scope.flag=false;
			}
		});
	</script>
	<body ng-app="myapp" ng-controller="myctrl">
		<button ng-click="flag=true">新增订单</button>
		<button ng-click="plsc()">批量删除</button>
		<input type="text" placeholder="按商品名称查询..." ng-model="name"/>
		<input type="text" placeholder="按手机号查询..." ng-model="gtel"/>
		<select ng-model="state">
			<option value="">--按状态查询--</option>
			<option value="已发货">--已发货--</option>
			<option value="未发货">--未发货--</option>
		</select>
		<table border="1" cellspacing="0" cellpadding="0" width="80%">
			<tr>
				<td><input type="checkbox" ng-model="checked" ng-change="ckchange()"/></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="s in good|orderBy:px:aa|filter:{'gname':name,'tel':gtel,'state':state}">
				<td><input type="checkbox" ng-model="s.ck"/></td>
				<td>{{s.id}}</td>
				<td>{{s.gname}}</td>
				<td>{{s.uname}}</td>
				<td>{{s.tel}}</td>
				<td>{{s.price|currency:"￥:"}}</td>
				<td>{{s.city}}</td>
				<td>{{s.regdate|date:"MM-dd hh-mm-ss"}}</td>
				<td>
					<button ng-show="s.state=='已发货'" style="background-color: green;">{{s.state}}</button>
					<button ng-show="s.state=='未发货'" ng-click="s.state='已发货'" style="background-color: yellow;">{{s.state}}</button>
				</td>
			</tr>
		</table>
		<form ng-show="flag">
			商品名：<input type="text" ng-model="gname"/><span id="s1" class="s"></span><br />
			用户名：<input type="text" ng-model="uname"/><span id="s2" class="s"></span><br />
			手机号：<input type="text" ng-model="tel"/><span id="s3" class="s"></span><br />
			价格为：<input type="text" ng-model="price"/><span id="s4" class="s"></span><br />
			城市<select ng-model="province" ng-change="change()" ng-options="p.province for p in addr"></select>
				<select ng-model="city" ng-options="c.city for c in province.citys"></select>
			   <br />
			   <input type="button" value="保存" ng-click="bc()"/>
		</form>
	</body>
</html>
Angular Js如何实现发货

猜你喜欢
