<!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/angular-route.js" ></script>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script type="text/javascript">
var app=angular.module("myapp",[]);
app.controller("myctrl",function($scope){
$scope.shopList=[
{name:'辣条',price:'80.90',num:""},
{name:'唐僧肉',price:'20.40',num:""},
{name:'仙丹',price:'46.90',num:""},
{name:'粘牙糖',price:'231.00',num:""},
{name:'魔鬼糖',price:'279.30',num:""}
];
//减少
$scope.reduce=function(index){
if($scope.shopList[index].num>1){
$scope.shopList[index].num--;
}else{
$scope.remove(index);
}
};
//增加
$scope.add=function(index){
$scope.shopList[index].num++;
}
//总价
$scope.allSum=function(){
var allPrice = 0;
for (var i=0; i<$scope.shopList.length;i++) {
allPrice += $scope.shopList[i].price * $scope.shopList[i].num;
}
return allPrice;
}
//总数
$scope.allNum=function(){
var allshu=0;
for (var i = 0; i < $scope.shopList.length; i++) {
allshu += $scope.shopList[i].num;
}
return allshu;
}
//移除
$scope.remove=function(index){
if(confirm("确定移除吗?")){
$scope.shopList.splice(index,1);
}
};
// 清空购物车
$scope.removeAll = function(){
if(confirm('确定清空购物车')){
$scope.shopList=[];
}
};
});
</script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<table border="1">
<tr ng-repeat="item in shopList">
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td><button ng-click="reduce($index)">-</button></td>
<td><input type="text" ng-model="item.num" ng-change="change($index)"></td>
<td><button ng-click="add($index)">+</button></td>
<td>{{item.price * item.num}}</td>
<td><button ng-click="remove($index)">移除</button></td>
</tr>
</table>
总价:<span ng-bind="allSum()"></span> 总数:<span ng-bind="allNum()"></span>
<button class="btn btn-warning" ng-click="removeAll()">清空购物车</button>
</body>
</html>
购物车
最新推荐文章于 2021-07-27 10:46:39 发布