angular

最新推荐文章于 2024-05-05 18:34:10 发布

niu_yue_jiao

最新推荐文章于 2024-05-05 18:34:10 发布

阅读量123

点赞数

本文链接：https://blog.csdn.net/niu_yue_jiao/article/details/79840164

版权

	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<title>月考</title>
	<script src="libs/angular.min.js"></script>
	<script src="libs/jquery-1.11.0.min.js"></script>
	<style>
	table {
	text-align: center;
	}

	.red {
	background-color: cornflowerblue;
	}

	.yellow {
	background-color: burlywood;
	}
	tr td{
	width: 250px;
	height:50px;
	}
	</style>
	</head>

	<body ng-app="myApp" ng-controller="myCtrl">
	<center>
	<input type="text" ng-model="chaKey" placeholder="按商品名称搜索..." style="border-radius: 20px; border-color: aqua;" />
	<button ng-click="addGoods()" style="background-color: aqua;margin-left: 280px;">添加商品</button>
	<button ng-click="deleteMore()" style="background-color: red;">批量删除订单</button><br />
	<br />
	<table border="1px" width="850px" cellpadding="0" cellspacing="0">
	<tr bgcolor="grey">
	<td><input type="checkbox" ng-model="checkAll" /></td>
	<td>商品名称</td>
	<td>商品价格</td>
	<td>购买数量</td>
	<td>商品总计</td>
	<td>下单时间</td>
	<td>商品状态</td>
	<td>商品会员</td>
	<td>收货地址</td>
	<td>修改状态</td>
	</tr>
	<tr ng-repeat="x in goods \| filter:{name:chaKey}" class="{{$index%2?'red':'yellow'}}">
	<td> <span ng-if="x.status=='0'"><input type="checkbox"></span>
	<span ng-if="x.status=='1'"><input type="checkbox" ng-model="checkAll"></span>
	</td>
	<td>{{x.name}}</td>
	<td>{{x.price \|currency:"￥："}}</td>
	<td>{{x.number}}</td>
	<td>{{x.zong=x.price*x.number \| currency:"￥："}}</td>
	<td>{{x.orderTime \| date:"yyyy-MM-dd hh:mm:ss"}}</td>
	<td>
	<span ng-if="x.status=='0'">已发货</span>
	<span ng-if="x.status=='1'">未发货</span>
	</td>
	<td>{{x.username}}</td>
	<td>{{x.address}}</td>
	<td>
	<span ng-if="x.status=='1'">
	<input type="button" value="发货" ng-click="fa($index)" style="background-color: aqua;"></span>
	<span ng-if="x.status=='0'">发货</span>
	</td>
	</tr>
	</table>
	<div ng-show="addShow">
	<h4>添加商品信息</h4>
	商品名称 : <input type="text" ng-model="name" />
	<span ng-show="showName" style="color: red;">*非空</span><br />
	商品价格 : <input type="text" ng-model="price" onkeyup="value=value.replace(/[^\d]/g,'')"/>
	<span ng-show="showPrice" style="color: red;">*必须为数字且不能小于0</span><br />
	商品数量 : <input type="text" ng-model="number" onkeyup="value=value.replace(/[^\d]/g,'')"/>
	<span ng-show="showNum" style="color: red;">*必须为数字且不能小于0</span><br />
	会员名称 : <input type="text" ng-model="username" />
	<span ng-show="showUser" style="color: red;">*非空</span><br />
	收货地址 :
	<input type="date" ng-model="orderTime" ng-init="orderTime='2018-04-07 08:22:23'" hidden="hidden" />
	<input type="text" ng-model="status" ng-init="status=0" hidden="hidden" />
	<select id="pro" ng-model="pros" ng-init="pros='北京'" onchange="getCitys()" style="width: 90px;">
	<option value="">--请选择省份--</option>
	<option>北京</option>
	<option>河南</option>
	</select>
	<select id="city" ng-model="citys" ng-init="citys='西二旗'" style="width: 90px;">
	<option value="">--请选择城市--</option>
	<option>西二旗</option>
	<option>东城</option>
	<option>西城</option>
	</select><br />
	<br />
	<button ng-click="sureAdd()">确认添加</button>
	</div>
	</center>
	<!-- 二级联动-->
	<script>
	var goods = [{
	pro: "北京",
	citys: ["东城", "西城", "西二旗"]
	}, {
	pro: "河南",
	citys: ["郑州", "洛阳", "驻马店"]
	}]

	function getCitys() {
	//清空之前的城市
	$("#city option").remove();
	var goods_citys = [];
	var p = $("#pro").val();
	for(var i in goods) {
	if(goods[i].pro == p) {
	goods_citys = goods[i].citys;
	}
	}
	for(var i in goods_citys) {
	$("#city").append($("<option>" + goods_citys[i] + "</option>"));
	}
	}
	</script>
	<script>
	var app = angular.module("myApp", []);
	app.controller("myCtrl", function($scope) {
	$scope.goods = [{
	"name": "西湖龙井",
	"price": 100.0,
	"number": 10,
	"orderTime": "1522412543225",
	"status": 1,
	"username": "飞过风潇雨霁",
	"address": "河南-驻马店"
	}, {
	"name": "中国茗茶",
	"price": 50.0,
	"number": 10,
	"orderTime": "1522412543125",
	"status": 0,
	"username": "飞过风潇雨霁",
	"address": "河南-驻马店"
	}, {
	"name": "安吉白茶",
	"price": 200.0,
	"number": 10,
	"orderTime": "1522412544225",
	"status": 1,
	"username": "飞过风潇雨霁",
	"address": "河南-驻马店"
	}, {
	"name": "云南普洱",
	"price": 200.0,
	"number": 2,
	"orderTime": "1522412546225",
	"status": 0,
	"username": "飞过风潇雨霁",
	"address": "河南-驻马店"
	}]
	//添加商品
	$scope.addGoods=function(){
	$scope.addShow=true;
	}
	$scope.sureAdd = function() {
	var addGood = {};
	addGood.name = $scope.name;
	addGood.price = $scope.price;
	addGood.number = $scope.number;
	addGood.username = $scope.username;
	addGood.orderTime = $scope.orderTime;
	addGood.status = $scope.status;
	addGood.address = $scope.pros + "-" + $scope.citys;
	//判断
	if(addGood.name == undefined) {
	$scope.showName = true;
	} else if(addGood.price == undefined) {
	$scope.showPrice = true;
	} else if(addGood.number == undefined) {
	$scope.showNum = true;
	} else if(addGood.username == undefined) {
	$scope.showUser = true;
	} else {
	$scope.goods.push(addGood);
	$scope.addShow=false;
	}
	}
	//批量删除
	$scope.deleteMore=function(){
	var checked=$("input[type='checkbox']:checked");
	for (var i = checked.length-1;i >= 0; i--) {
	var c =checked[i].value;
	$scope.goods.splice(c,1);
	}
	$scope.checkAll=false;
	}
	//发货
	$scope.fa=function(index){
	$scope.goods[index].status=0;
	}
	});
	</script>
	</body>

	</html>

niu_yue_jiao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular

&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;月考&lt;/title&gt; &lt;script src="libs/angular.min.js"&gt;&lt;/script&gt; &l
复制链接

扫一扫