angularJs 动态求总价

<!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-3.2.1.min.js" ></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
var date1= new Date();
var date2= new Date();
var date3= new Date();
var date4= new Date();
$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(){
alert(111111111);
$scope.ifFlag=!$scope.ifFlag;
}
$scope.newname="";
$scope.newnum="";
$scope.newprice="";
$scope.newaddress="";
$scope.updateIndex=0;
$scope.addGood= function(){
if($("#btn1").val()=="添加"){
var good={
name:$scope.newname,
num:$scope.newnum,
price:$scope.newprice,
address:$scope.newaddress,
date:new Date()
};
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].nprice;
$scope.newaddress=$scope.goods[$index].address;
}
//总计
$scope.allPrice=0;
$scope.getAllPrice=function(){
var count=0;
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>
<h1>商品信息</h1>
<input type="text" placeholder="请输入关键搜索字" ng-model="search"/>
<select ng-model="orderByKey">
<option value="">请选择</option>
<option value="price">价格升序</option>
<option value="-price">价格降序</option>
<option value="num">数量升序</option>
<option value="-num">数量降序</option>
</select>
<input type="button" value="入库" ng-click="ifAdd()"/>
<table border="1px" >
<tr>
<td>商品序号</td>
<td>商品名称</td>
<td>商品数量</td>
<td>商品价格</td>
<td>商品地址</td>
<td>商品日期</td>
<td>操作</td>
</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 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.address}}</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 />
<input type="button" value="添加" id = "btn1" ng-click="addGood();" />
</div>
</center>
</body>
</html>

angularJs 动态求总价

猜你喜欢