<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title></title> | |
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script> | |
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script> | |
<style type="text/css"> | |
.main{ | |
text-align: center; | |
} | |
thead{ | |
background: gray; | |
} | |
tbody tr:nth-child(even){ | |
/*下标从1开始 even偶数*/ | |
background-color: white; | |
} | |
tbody tr:nth-child(odd){ | |
/*下标从1开始 odd奇数*/ | |
background-color: gainsboro; | |
} | |
ul{ | |
list-style:none; | |
padding-top: 5px; | |
padding-bottom: 5px; | |
clear: both;/*清除浮动*/ | |
width: 60%; | |
margin: 0 auto; | |
padding-left: 0px; | |
} | |
ul li{ | |
margin-top: 5px; | |
} | |
.goods{ | |
width: 60%; | |
margin: 0 auto; | |
} | |
.goods input[type="text"]{ | |
float: left; | |
margin-top: 10px; | |
margin-bottom: 10px; | |
} | |
.goods select{ | |
float:right; | |
margin-top: 10px; | |
margin-bottom: 10px; | |
margin-right: 30px; | |
height: 22px; | |
} | |
#btn_add{ | |
float:right; | |
margin-top: 10px; | |
margin-bottom: 10px; | |
background: green; | |
border-radius: 5px; | |
border: 0px; | |
width: 90px; | |
} | |
#input_date{ | |
width: 158px; | |
height: 15px; | |
padding-left: 0px; | |
padding-top: 1px; | |
padding-bottom: 1px; | |
} | |
</style> | |
</head> | |
<body ng-app="myapp" ng-controller="myctrl"> | |
<div class="main"> | |
<h2>商品库存管理系统</h2> | |
<div class="goods"> | |
<!--placeholder 相当于hint 提示文字--> | |
<input type="text" name="" value="" placeholder="输入关键字搜索..." ng-model="searchKey"/> | |
<input type="button" name="" id="btn_add" value="入库" ng-click="isAdd=!isAdd" /> | |
<select ng-model="orderKey"> | |
<option value="num">按货物数量正序排列</option> | |
<option value="-num">按货物数量倒序排列</option> | |
<option value="gdate">按入库时间正序排列</option> | |
<option value="-gdate">按入库时间倒序排列</option> | |
</select> | |
</div> | |
<ul ng-show="isAdd"> | |
<li>货物名称 <input type="text" ng-model="gname"/></li> | |
<li>货物数量 <input type="text" ng-model="gnum"/></li> | |
<li>货物产地 <input type="text" ng-model="gproduction"/></li> | |
<li>货物单价 <input type="text" ng-model="gprice"/></li> | |
<li>入库日期 <input type="date" ng-model="ggdate" id="input_date"/></li> | |
<li><input type="button" value="保存" ng-click="saveGoods()"/></li> | |
</ul> | |
<div class="goods"> | |
<table border="1" cellspacing="0" cellpadding="0" width="100%"> | |
<thead><tr> | |
<th>货物名称</th> | |
<th>货物数量</th> | |
<th>货物产地</th> | |
<th>货物单价</th> | |
<th>货物入库日期</th> | |
<th>操作</th> | |
</tr></thead> | |
<tbody> | |
<tr ng-repeat="x in goods|filter:searchKey|orderBy:orderKey"> | |
<td>{{x.name}}</td> | |
<td>{{x.num}}</td> | |
<td>{{x.production}}</td> | |
<td>{{x.price|currency:"¥:"}}</td> | |
<td>{{x.gdate|date:"yyyy-MM-dd HH:mm:ss"}}</td> | |
<td><input type="button" name="" id="" value="删除" ng-click="delgoods(x.name)"/></td> | |
</tr> | |
</tbody> | |
</table> | |
</div> | |
</div> | |
<script type="text/javascript"> | |
var app=angular.module("myapp",[]); | |
app.controller("myctrl",function($scope){ | |
//搜索关键字 | |
$scope.searchKey=""; | |
//初使化 | |
$scope.orderKey="num"; | |
//不显示 | |
$scope.isAdd=false; | |
$scope.goods=[ | |
{name:"云南白药",num:100,production:"云南",price:19.9,gdate:(new Date()).setDate(new Date().getDate()-1)}, | |
{name:"999感冒灵",num:30,production:"北京",price:12.5,gdate:(new Date()).setDate(new Date().getDate()-2)}, | |
{name:"感康",num:20,production:"河北",price:16.6,gdate:(new Date()).setDate(new Date().getDate()-3)}]; | |
$scope.delgoods=function(gname){ | |
//弹出确认窗口 alert confirm promt | |
var c=confirm("确定要删除吗?"); | |
if(c){//点击了确定按钮 | |
for (var i = 0; i < $scope.goods.length; i++) { | |
if($scope.goods[i].name==gname){ | |
$scope.goods.splice(i,1);//进行删除 | |
break; | |
} | |
} | |
alert("删除成功!"); | |
}else{ | |
} | |
} | |
$scope.saveGoods=function(){ | |
//定义一个对象 | |
var newgoods={}; | |
newgoods.name=$scope.gname; | |
newgoods.num=$scope.gnum; | |
newgoods.production=$scope.gproduction; | |
newgoods.price=$scope.gprice; | |
newgoods.gdate=$scope.ggdate; | |
//进行添加 | |
$scope.goods.push(newgoods); | |
} | |
}); | |
</script> | |
</body> | |
</html> | |
网页月考练习2
最新推荐文章于 2021-05-22 17:33:55 发布