效果图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../angular/angular.js" ></script>
<style>
table tr:nth-child(odd){
background-color: #999999;
table tr:nth-child(even){
background-color: #E1E1E1;
}
</style>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
//定义数据
$scope.products=[{
name:"云南白药",
num:100,
add:"云南",
price:19.9,
dates:"2017-11-20 09:32:21"
},{
name:"999感冒灵",
num:30,
add:"北京",
price:12.5,
dates:"2017-11-20 10:32:21"
},{
name:"感康",
num:20,
add:"河北",
price:16.6,
dates:"2017-11-20 11:11:11"
},{
name:"人参",
num:1,
add:"长白山",
price:9999,
dates:"2017-11-20 09:32:21"
}];
//删除模块
$scope.delProduct=function(delName){
for(index in $scope.products){
if(delName==$scope.products[index].name){
$scope.products.splice(index,1);
//alert弹出框
alert("确定删除么?")
alert("删除成功!!!")
}else{
}
}
}
//排序
$scope.selOrder;
$scope.orderSel=function(){
//进行判断
if($scope.selOrder=="num"){
$scope.orderFlag="";
$scope.orderLine="num";
}else if($scope.selOrder=="-num"){
$scope.orderFlag="-";
$scope.orderLine="num";
}else if($scope.selOrder=="price"){45
$scope.orderFlag="";
$scope.orderLine="price";
}else if($scope.selOrder=="-price"){
$scope.orderFlag="-";
$scope.orderLine="price"
}
}
//入库
$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(){
alert($scope.newName);
var newProduct={
name:$scope.newName,
num:parseInt($scope.newNum),
add:$scope.newAddress,
price:$scope.newPrice,
dates:new Date()
};
$scope.products.push(newProduct);
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<!--
页面搭建
-->
<center>
<h2>商品库存管理系统</h2>
<input ng-model="search" type="text" placeholder="输入关键字搜索..." />
<select ng-model="selOrder" ng-change="orderSel()"style="margin-left: 200px;">
<option value="">排序方式</option>
<option value="num">按照货物数量正序排列</option>
<option value="-num">按照货物数量倒序排列</option>
<option value="price">按照入库时间正序排列</option>
<option value="-price">按照入库时间倒序排列</option>
</select>
<button ng-click="isIf()" style="background: #99FF00; margin-left: 40px;">入库</button>
<br /><br />
<!--
将数据展示到表格中
-->
<table border="1px solid blue" cellpadding="10" cellspacing="0" id="tbMain">
<tr>
<th>货物名称</th>
<th>货物数量</th>
<th>货物产地</th>
<th>货物单价</th>
<th>货物入库日期</th>
<th>操作</th>
</tr>
<tr ng-repeat="sz in products | filter:{'name':search} | orderBy:(orderFlag+orderLine)">
<td>{{sz.name}}</td>
<td>{{sz.num}}</td>
<td>{{sz.add}}</td>
<td>{{sz.price | currency:"¥:"}}</td>
<td>{{sz.dates | date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td>
<button ng-click="delProduct(sz.name)">删除</button>
</td>
</tr>
</table>
<br /><br />
<div style="width: 300px;" 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>