<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table tr:nth-child(even){background: #eee;}
tr button{
width: 30px;
}
</style>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/angular.min.js"></script>
<script>
var sapp = angular.module("linrenjiang",[]);
sapp.controller("con",function($scope){
$scope.stus=[];
$scope.add = function(){
if($scope.uname==undefined || $scope.uname == "" || $scope.uname.length<=2 || $scope.uname.length>20){
alert("商品名称输入有误!");
}else if($scope.typer == undefined || $scope.typer.length<=1 || $scope.typer.length>20 || $scope.typer==""){
alert("商品类型输入有误!");
}else if($scope.price<0 || $scope.price == undefined){
alert("商品价格输入有误!");
}else{
if($scope.shu == null){
$scope.shu = 1;
}
var good ={name1:$scope.uname,typer:$scope.typer,price:$scope.price,shu:$scope.shu};
$scope.stus.push(good);
}
}
$scope.del = function(s){
if(confirm("确定删除吗?")){
$scope.stus.splice(s,1);
}
}
$scope.sum = function(){
var zong1 = 0;
for(var i in $scope.stus){
zong1 = zong1+$scope.stus[i].price*$scope.stus[i].shu;
}
return zong1;
}
$scope.num = function(cc,index){
if($scope.stus[index].shu>=1){
$scope.stus[index].shu = $scope.stus[index].shu+cc;
}else{
if(confirm("是否删除该商品?")){
$scope.stus.splice(index,1);
}
}
}
})
</script>
</head>
<body ng-app="linrenjiang" ng-controller="con">
商品名称:<input ng-model="uname" />
商品类型:<input ng-model="typer" />
商品价格:<input type="number" ng-model="price" />
商品数量:<input type="number" ng-model="shu"/>
<button ng-click="add()">添加</button>
<table width="800" border="2" cellspacing="0">
<tr style="background: #999;">
<th>商品序号</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>商品类型</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr ng-repeat="s in stus">
<td>{{$index}}</td>
<td>{{s.name1}}</td>
<td>{{s.price}}</td>
<td><button ng-click="num(-1,$index)">-</button> <input style="width: 30px;" ng-model="s.shu" /><button ng-click="num(1,$index)">+</button> </td>
<td>{{s.typer}}</td>
<td>{{s.price*s.shu}}</td>
<td><button ng-click="del($index)" style="width: 60px">删除</button></td>
</tr>
</table>
<p style="margin-left: 600px;">总计:{{sum()}}</p>
</body>
</html>
输入框添加信息
最新推荐文章于 2022-09-21 21:51:49 发布