<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table tr:nth-child(even){
background: #EEEEEE;
}
table tr:nth-child(add){
background: #FFFFFF;
}
</style>
<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
//準備數據
var date1 = new Date("2018-1-09 09:09:09");
var date2 = new Date("2018-1-10 10:10:10");
var date3 = new Date("2018-1-01 21:21:21");
var date4 = new Date("2018-1-05 13:13:31");
//初始化數據
$scope.goods = [{
name:"雲南白藥",
num:1,
address:"雲南",
price:19.9,
date:date1
},{
name:"999感冒靈",
num:1,
address:"北京",
price:12.5,
date:date2
},{
name:"感康",
num:1,
address:"河北",
price:16.6,
date:date3
},{
name:"可可",
num:1,
address:"澳大利亞",
price:99,
date:date4
}];
//搜素條件
$scope.search = "";
$scope.orderByKey = "";
//入庫相關
$scope.ifFlag = false;
//點擊 入庫 是否顯示下方的輸入區域
$scope.ifAdd = function(){
$scope.ifFlag = !$scope.ifFlag;
}
//添加商品
$scope.newname = "";
$scope.newnum = "";
$scope.newprice = "";
$scope.newaddress = "";
//
$scope.updateIndex = 0;
$scope.addGood = function(){
if($("#btn1").val() =="添加"){
//創建good對象
var good = {
name:$scope.newname,
num:$scope.newnum,
price:$scope.newprice,
address:$scope.newaddress,
date:new Date()
};
//此次添加，如果table沒有出現，先顯示
if($scope.goods.length == 0){
$scope.showTitle = true;
};
$scope.goods.push(good);
//添加完後,自動隱藏輸入區域
$scope.ifFlag = false;
}else{
$scope.goods[$scope.updateIndex].name = $scope.newname;
$scope.goods[$scope.updateIndex].num = $scope.newnum;
$scope.goods[$scope.updateIndex].price = $scope.newprice;
$scope.goods[$scope.updateIndex].address = $scope.newaddress;
}
}
//刪除商品
$scope.showTitle = true;
$scope.deleteGood = function($index){
$scope.goods.splice($index,1);
if($scope.goods.length == 0){
$scope.showTitle = false;
};
}
//修改商品
$scope.updateGood = function($index){
$scope.updateIndex = $index;
//顯示修改區域
$scope.ifFlag = true;
$("#btn1").val("修改");
$scope.newname = $scope.goods[$index].name;
$scope.newnum = $scope.goods[$index].num;
$scope.newprice = $scope.goods[$index].price;
$scope.newaddress = $scope.goods[$index].address;
}
//總計
$scope.allPrice = 0;
$scope.getAllPrice = function(){
var count = 0;
//遍歷goods 得到索引
for(index in $scope.goods){
count += $scope.goods[index].price*$scope.goods[index].num;
}
$scope.allPrice = count;
}
//調用計算總價的函數
$scope.getAllPrice();
//減號
$scope.jian1 = function($index){
$scope.goods[$index].num = $scope.goods[$index].num-1;
//調用計算總價的函數
$scope.getAllPrice();
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>商品信息</h3>
<input type="text" ng-model="search" placeholder="請輸入搜素關鍵字" />
<select ng-model="orderByKey">
<option value="">--請選擇--</option>
<option value="num">數量升序</option>
<option value="-num">數量降序</option>
<option value="price">價格升序</option>
<option value="-price">價格降序</option>
</select>
<input type="button" value="入庫" ng-click="ifAdd();" /><br /><br />
<table border="1px" ng-show="showTitle">
<tr style="background-color: dimgray;">
<th>商品序號</th>
<th>商品名稱</th>
<th width="120" ng-click="orderByKey='num'">商品數量</th>
<th width="80" ng-click="orderByKey='price'">商品價格</th>
<th>商品地址</th>
<th>商品日期</th>
<th>操作</th>
</tr>
<tr ng-repeat="g in goods | orderBy:orderByKey | filter:{name:search}">
<td>{{$index}}</td>
<td>{{g.name}}</td>
<td>
<input type="button" value="-" ng-click="g.num=g.num-1; getAllPrice();"/>
{{g.num}}
<input type="button" value="+" ng-click="g.num=g.num+1; getAllPrice();"/>
</td>
<td>{{g.address}}</td>
<td ng-dblclick="g.flag=false">
<span ng-show="g.flag">{{g.price}}</span>
<input ng-hide="g.flag" ng-model="g.price" ng-change="getAllPrice();" ng-blur="g.flag=true;" type="text" />
</td>
<td>{{g.date | date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td>
<input type="button" value="修改" ng-click="updateGood($index);" />
<input type="button" value="刪除" ng-click="deleteGood($index);" />
</td>
</tr>
</table><br />
總價: <span>{{allPrice | number:2}}</span>
<div ng-show="ifFlag">
商品名稱: <input type="text" placeholder="輸入商品名稱" ng-model="newname" /><br />
商品數量: <input type="text" placeholder="輸入商品數量" ng-model="newnum" /><br />
商品價格: <input type="text" placeholder="輸入商品價格" ng-model="newprice" /><br />
商品地址: <input type="text" placeholder="輸入商品地址" ng-model="newaddress" /><br /><br />
<input type="button" id="btn1" value="添加" ng-click="addGood();" />
</div>
</center>
</body>
</html>
![]()
