计算价格

最新推荐文章于 2024-09-14 14:36:35 发布

Xin_zang

最新推荐文章于 2024-09-14 14:36:35 发布

阅读量276

点赞数

本文链接：https://blog.csdn.net/Xin_zang/article/details/79061870

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/angular-route.js" ></script>

<style>

table tr:nth-child(even){
background-color: coral;
}
table tr:nth-child(odd){
background-color: chocolate;
}
</style>

<script>

var app = angular.module("myapp",['ngRoute']);
app.controller("myCtrl",function($scope){
var date1 = new Date("2017-9-01 10:10:10");
var date2 = new Date("2017-1-02 10:10:10");
var date3 = new Date("2017-1-03 10:10:10");
$scope.goods = [{
name :"辣条",
num:1000,
address:"北京",
price:2,
date:date1,
f:true

},{
name :"棒棒糖",
num:500,
address:"铁岭",
price:5,
date:date2,
f:true

},{
name :"凉皮",
num:100,
address:"河南",
price:8,
date:date3,
f:true

}];

$scope.biao = true;
//删除商品
$scope.shanchu = function($index){

if(confirm("确认删除")){
$scope.goods.splice($index,1);
alert("删除成功！");

if($scope.goods.length == 0){
$scope.biao = false;
}

}

}

//入库
$scope.tian = false;

$scope.tianjia = function(){

$scope.tian = !$scope.tian;
}

//添加按钮

//定义
$scope.newname = "";
$scope.newnum = "";
$scope.newaddress = "";
$scope.newprice = "";

$scope.addGood = function(){
var good = {
name:$scope.newname,
num:$scope.newnum,
address:$scope.newaddress,
price:$scope.newprice,
date:new Date()
};

//如果table没有显示先显示再添加
if($scope.goods.length == 0){
$scope.biao = true;
}

//添加

$scope.goods.push(good);
$scope.tian = false;

}

$scope.newname1 = "";
$scope.newnum1 = "";
$scope.newaddress1 = "";
$scope.newprice1 = "";

//显示修改
$scope.xiu = false;
$scope.xiugai = 0;
$scope.xiugai = function($index){

$scope.xiu = !$scope.xiu;

$scope.xiugai = $index;

$scope.newname1 = $scope.goods[$index].name;
$scope.newnum1 = $scope.goods[$index].num;
$scope.newaddress1 = $scope.goods[$index].address;
$scope.newprice1 = $scope.goods[$index].price;

}

//修改
$scope.update1 = function(){

$scope.goods[$scope.xiugai].name = $scope.newname1;
$scope.goods[$scope.xiugai].num = $scope.newnum1;
$scope.goods[$scope.xiugai].address = $scope.newaddress1;
$scope.goods[$scope.xiugai].price = $scope.newprice1;

$scope.xiu = false;

}

//总价

$scope.allprice = function(){

var a = 0;

for (var i = 0; i < $scope.goods.length; i++) {
a += $scope.goods[i].num * $scope.goods[i].price;
}
return a;
}

});

</script>

</head>
<body ng-app="myapp" ng-controller="myCtrl">

<center>

<h2>八维小卖部</h2>
<input type="text" placeholder="请输入搜索关键字" ng-model="sou" />
<select ng-model="paixu">
<option value="">---请选择---</option>
<option value="name">按数量升序</option>
<option value="-name">按数量降序</option>
<option value="num">按价格升序</option>
<option value="-num">按价格降序</option>
<option value="date">按时间降序</option>
<option value="-date">按时间降序</option>
</select>

<input type="button" value="添加入库" ng-click="tianjia()"/>

<table border="1px" width="700px" ng-show="biao">
<tr style="background-color: aquamarine">
<th>序号</th>
<th>商品名称</th>
<th>商品数量</th>
<th>商品地址</th>
<th>商品价格</th>
<th>商品日期</th>
<th>小计</th>
<th>操作</th>
</tr>

<tr ng-repeat="g in goods | orderBy:paixu | filter:sou">
<td>{{$index}}</td>
<td>{{g.name}}</td>
<td>
<input type="button" value="-" ng-click="g.num=g.num-1" />
{{g.num}}
<input type="button" value="+" ng-click="g.num=g.num+1" />
</td>
<td>{{g.address}}</td>
<td ng-dblclick="g.f=false">

<span ng-show="g.f">{{g.price}}</span>
<input type="text" ng-hide="g.f" ng-model="g.price" ng-blur="g.f=true" />

</td>

<td>{{g.date | date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td>{{g.price*g.num}}</td>
<td>
<input type="button" value="删除" ng-click="shanchu($index)" />
<input type="button" value="修改" ng-click="xiugai($index)" />

</td>
</tr>

</table>
总计：<span>{{allprice()}}</span>

<div ng-show="tian">
<br /><br /><br />
名称：<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="addGood()" />
</div>
<div ng-show="xiu">
<br /><br /><br />
名称：<input type="text" placeholder="修改商品名称" ng-model="newname1" /><br /><br />
数量：<input type="text" placeholder="修改商品数量" ng-model="newnum1" /><br /><br />
地址：<input type="text" placeholder="修改商品地址" ng-model="newaddress1" /><br /><br />
价格：<input type="text" placeholder="修改商品价格" ng-model="newprice1" /><br /><br />
<input type="button" value="修改" ng-click="update1()" />
</div>

</center>
</body>
</html>