购物车

Mike_8859

于 2017-11-21 20:05:11 发布

阅读量252

点赞数

本文链接：https://blog.csdn.net/Mike_chao/article/details/78596348

版权

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/angular.js"></script>
		<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
		<style>
			table tr:nth-child(odd) {
				background: #e0e;
			}
			
			table tr:nth-child(even) {
				background: #ff0;
			}
		</style>
		<script type="text/javascript">
			

			var app = angular.module("myApp", []);
			app.controller("myCtrl", function($scope) {
				var dates = new Date();
				$scope.goods = [{
					name: "云南白药",
					num: 100,
					cd: "云南",
					price: "19.9",
					dates: dates
				}, {
					name: "999感冒灵",
					num: 30,
					cd: "北京",
					price: "12.5",
					dates: dates
				}, {
					name: "感康",
					num: 20,
					cd: "河北",
					price: "16.6",
					dates: dates
				}]

				//刪除
				$scope.delete = function(name) {
					var s = window.confirm("确定要删除吗?");
					if(s == true) {
						$scope.goods.splice(name, 1);
						alert("删除成功");
					}

				}

				$scope.isshow = false;
				$scope.isif = function() {
					if($scope.isshow) {
						$scope.isshow = false;
					} else {
						$scope.isshow = true;
					}

					
				}
				//添加
				$scope.newName = "";
				$scope.newNum = "";
				$scope.newAddress = "";
				$scope.newPrice = "";
				$scope.addProduct = function() {
					var newproduct = {
						name: $scope.newName,
						num: $scope.newNum,
						cd: $scope.newAddress,
						price: $scope.newPrice,
						dates: new Date()
					};
					$scope.goods.push(newproduct);
				}
			});
		</script>
	</head>

	<body ng-app="myApp" ng-controller="myCtrl">
		<center>
			<h2>商品库存管理系统</h2>
			<input type="text" placeholder="输入关键字搜索" ng-model="cx" />   
			<select ng-model="sel">
				<option value="">--请选择--</option>
				<option value="num">按货物数量正序排列</option>
				<option value="-num">按货物数量倒序排列</option>
				<option value="dates">按货物日期正序排列</option>
				<option value="-dates">按货物日期倒序排列</option>
			</select>
			  
			<button ng-click="isif()">入库</button>
			<br />
			<br />

			<table border="1" cellpadding="10" cellspacing="0">
				<tr style="background: #333;">
					<th>货物名称</th>
					<th>货物数量</th>
					<th>货物产地</th>
					<th>货物单价</th>
					<th>货物入库日期</th>
					<th>操作</th>

				</tr>
				<tr ng-repeat="good in goods | filter:{'name':cx} | orderBy:'-num' | orderBy:sel">
					<td>{{good.name}}</td>
					<td>{{good.num}}</td>
					<td>{{good.cd}}</td>
					<td>{{good.price | currency:"￥"}}</td>
					<td>{{good.dates | date:"yyyy-MM-dd hh:mm:ss"}}</td>
					<td><button ng-click="delete(good.name)">删除</button></td>
				</tr>
			</table>

			<div id="" ng-show="isshow">
				<h3>入库操作</h3> 商品名称：
				<input type="text" placeholder="请输入商品名称" ng-model="newName" /><br /><br /> 商品数量：
				<input type="text" placeholder="请输入商品数量" ng-model="newNum" /><br /><br /> 商品产地：
				<input type="text" placeholder="请输入商品产地" ng-model="newAddress" /><br /><br /> 商品价格：
				<input type="text" placeholder="请输入商品价格" ng-model="newPrice" /><br /><br />
				<input type="button" value="添加" ng-click="addProduct()" />
			</div>
		</center>
	</body>

</html>

Mike_8859

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
购物车

table tr:nth-child(odd) { background: #e0e; } table tr:nth-child(even) { background: #ff0; } var app = angular.module("myApp", []); app.controller("myCtrl", funct
复制链接

扫一扫