<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
border-collapse: collapse;
}
th,td{
padding: 10px;
border: 1px solid #000;
}
span{
display: inline-block;
width: 18px;
height: 18px;
line-height: 18px;
text-align: center;
background: #eee;
}
</style>
<script src="angular-1.5.5/angular.min.js"></script>
<script>
var items=[{
name:"sx",
count:4,
price:200
},{
name:"pg",
count:2,
price:100
},{
name:"hw",
count:1,
price:100
}];
var myapp=angular.module("myapp",[]);
myapp.controller("myCtrl",function($scope){
$scope.items=items;
$scope.min=function(index){
$scope.items[index].count--;
if($scope.items[index].count<=0){
$scope.items[index].count=0;
}
};
$scope.add=function(index){
$scope.items[index].count++;
};
$scope.del=function(index){
if(confirm("确定吗?")==true){
$scope.items.splice(index,1);
}
};
$scope.count=function(){
var n=0;
for(var i=0;i<$scope.items.length;i++){
n+=$scope.items[i].price*$scope.items[i].count
}
if(n>1100){
$scope.yf=0;
}else{
$scope.yf=10;
}
return n;
};
/* $scope.$watch("count()",function(value){
//console.log(value)
if(value>1100){
$scope.yf=0;
}else{
$scope.yf=10;
}
})*/
})
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<table>
<thead>
<tr>
<th>名称</th>
<th>数量</th>
<th>价格</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td>{{item.name}}</td>
<td><span ng-click="min($index)">-</span><input type="text" ng-model="item.count"><span ng-click="add($index)">+</span></td>
<td>{{item.price}}</td>
<td>{{item.price*item.count}}</td>
<td><button ng-click="del($index)">删除</button></td>
</tr>
</tbody>
</table>
<p>应付金额<a>{{count()}}</a></p>
<p>邮费<a>{{yf}}</a></p>
<p>师父金额<a>{{count()+yf}}</a></p>
</body>
</html>
购物
最新推荐文章于 2024-06-27 02:33:35 发布