zk3

最新推荐文章于 2021-07-08 10:44:16 发布

马龙德兰胜

最新推荐文章于 2021-07-08 10:44:16 发布

阅读量207

点赞数

本文链接：https://blog.csdn.net/qq_42045179/article/details/80102551

版权

<!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.8.2.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			tr:nth-child(odd){
				background-color: cornflowerblue;
			}
			tr:nth-child(even){
				background-color: lightgreen;
			}
		</style>
		<script type="text/javascript">
			angular.module("myApp",[]).controller("myCtrl",function ($scope,$http) {
				
				$http.get("goods.json").then(function(success){
					$scope.goods=success.data;
				})
				
				$scope.order=["请选择排序方式","按商品价格升序","按商品价格降序","按生产日期升序","按生产日期降序"];
				$scope.optionName = $scope.order[0];
				$scope.flag = false;
				$scope.save=function(){
					$(".inp").val("");
					
					var gname = $scope.gname;
					var price = $scope.price;
					var address = $scope.address;
					if(gname == undefined || gname == "") {
						alert("输入的商品名称不能为空");
						return;
					}
					if(price == undefined || price == "") {
						alert("输入的商品价格不能为空");
						return;
					}
					if(address == undefined || address == "") {
						alert("输入的商品产地不能为空");
						return;
					}
					
					
					$scope.goods.push({
						checked:false,
						gname:gname,
						address:address,
						id:1,
						regDate:new Date(),
						price:price,
						state:"发货"
						
					})
					
					$scope.flag = false;
					
				}
				
				$scope.selectAll = function(){
					
					var ic = $scope.ischeck;
					for (var i = 0;i<$scope.goods.length;i++) {
						$scope.goods[i].checked=ic;
					}
					
				}
				
				$scope.del = function(index){
					
					$scope.goods.splice(index,1);
					
				}
				
				$scope.update=function(index){
					
					var value=prompt("请输入修改的内容",$scope.goods[index].price);
					$scope.goods[index].price = value;
					
				}
				
				$scope.delAll=function  () {
					for (var i = 0; i < $scope.goods.length; i++) {
						if($scope.goods[i].checked==true){
							$scope.goods.splice(i,1);
							i--;
						}
					}
					
				}
				
				$scope.faAll=function () {
					
					for (var i = 0; i < $scope.goods.length; i++) {
						if($scope.goods[i].checked==true){
							$scope.goods[i].state="已发货";
							$scope.goods[i].checked=false;
							$scope.ischeck=false;
						}
					}
				}
				
				$scope.change = function() {

					var value = $scope.optionName;
					switch(value) {
						case "按商品价格升序":
							$scope.goods.sort(function(a, b) {
								return a.price - b.price;
							})
							break;
						case "按商品价格降序":
							$scope.goods.sort(function(a, b) {
								return b.price - a.price;
							})
							break;
						case "按生产日期升序":
							$scope.goods.sort(function(a, b) {
								return a.regDate - b.regDate;
							})
							break;
						case "按生产日期降序":
							$scope.goods.sort(function(a, b) {
								return b.regDate - a.regDate;
							})
							break;
						default:
							break;
					}
				}
			
			})
			
		</script>
	</head>
	<body ng-app="myApp" ng-controller="myCtrl">
		<button ng-click="flag=true">新增</button>
		<button ng-click="delAll()">批量删除</button>
		<button ng-click="faAll()">批量发货</button>
		<input type="text" ng-model="selectName" placeholder="请输入商品名称"/>
		<input type="text" ng-model="selectProduce" placeholder="请输入商品产地"/>
		<select ng-model="optionName" ng-options="s for s in order" ng-change="change()">{{s}}</select><br />
		<table border="1px" cellspacing="0" cellpadding="0" width="800px">
			<tr style="background-color:aquamarine">
				<th><input type="checkbox" ng-model="ischeck" ng-change="selectAll()"/> </th>
				<th>商品名称</th>
				<th>商品产地</th>
				<th>商品价格</th>
				<th>生产日期</th>
				<th>状态</th>
				<th>操作</th>
			</tr>
			<tr ng-repeat="a in goods|filter:{gname:selectName,address:selectProduce}">
				<td><input type="checkbox" ng-model="a.checked" /> </td>
				<td>{{a.gname}}</td>
				<td>{{a.address}}</td>
				<td>{{a.price|currency:"￥"}}</td>
				<td>{{a.regDate|date:"yy年MM月dd日hh时mm分ss秒"}}</td>
				<td>
					<span ng-show="a.state=='已发货'">{{a.state}}</span>
					<span ng-show="a.state=='发货'" ng-click="a.state='已发货'">
						<a href="#">{{a.state}}</a>
					</span>
				</td>
				<td><button ng-click="del($index)">删除</button>|<button ng-click="update($index)">修改</button> </td>
			</tr>
		</table>
		<form ng-show="flag">
			商品名称：<input type="text" ng-model="gname" class="inp" /><br />
			商品价格：<input type="text" ng-model="price" class="inp" /><br />
			商品产地：<input type="text" ng-model="address" class="inp" /><br />
			<button ng-click="save()">保存</button>
		</form>
		
	</body>
</html>

马龙德兰胜

关注

0
点赞
踩
0

收藏

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

tr:nth-child(odd){ background-color: cornflowerblue; } tr:nth-child(even){ background-color: lightgreen; } angular.module("myApp",[]).controller("myCtrl",function ($scope,$ht
复制链接

扫一扫

zk3

“相关推荐”对你有帮助么？