Angular.JS-简单购物车
2016-11-23 本文已影响0人
Lamport
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Angular.JS-简单购物车 </title>
<style type="text/css">
body {
background-color: #D3D3D3;
}
body> div {
width: 800px;
text-align: right;
line-height: 35px;
margin: 50px auto 0;
}
button {
border: none;
outline: none;
}
td,
th {
width: 150px;
text-align: center;
}
table {
width: 800px;
}
.num {
width: 70px;
text-align: center;
}
tr td:last-child button {
background-color: red;
color: #FFFFFF;
border-radius: 5px;
padding: 5px 8px;
}
#foot button {
background-color: red;
border-radius: 8px;
color: #FFFFFF;
font-weight: 900;
font-size: 20px;
padding: 5px 10px;
}
#foot span:nth-child(2) {
margin-right: 110px;
font-size: 25px;
}
#foot span:nth-child(4) {
margin-right: 135px;
font-weight: 900;
font-size: 30px;
}
#foot p {
margin-bottom: 0px;
}
</style>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body ng-app="myApp">
<div ng-controller="VC1">
<table border="" cellspacing="" cellpadding="">
<tr>
<th>产品编号</th>
<th>产品名称</th>
<th style="width: 200px;">购买数量</th>
<th>产品单价</th>
<th>产品总价</th>
<th>操作</th>
</tr>
<tr ng-repeat="x in Product">
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>
<button ng-click="reduce($index)">-</button>
<input type="text" class="num" ng-model="x.quantity" ng-change="change($index)" />
<button ng-click="add($index)">+</button>
</td>
<td>{{x.price|currency:"￥"}}</td>
<td>{{x.price * x.quantity|currency:"￥"}}</td>
<td>
<button ng-click="remove($index)" style="">移除</button>
</td>
</tr>
</table>
<div id="foot">
<p>
<span>购买数量:</span>
<span>{{numAll()}} 个</span>
<span>总价:</span>
<span>{{totalQuantity()|currency:"￥"}}</span>
</p>
<button ng-click="removeAll()">清空购物车</button>
</div>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("VC1", function($scope) {
$scope.Product = [{
id: 'Apple',
name: "苹果",
quantity: 0,
price: 4
}, {
id: 'Banana',
name: "香蕉",
quantity: 0,
price: 4.5
}, {
id: 'Kiwifruit',
name: "猕猴桃",
quantity: 0,
price: 5
}, {
id: 'Pineapple',
name: "菠萝",
quantity: 0,
price: 8
}, {
id: 'Watermelon',
name: "西瓜",
quantity: 0,
price: 5
}, {
id: 'Orange',
name: "橙子",
quantity: 0,
price: 6.3
}];
//减少数量
$scope.reduce = function(index) {
if($scope.Product[index].quantity > 0) {
$scope.Product[index].quantity--;
} else {
$scope.remove(index);
};
};
//添加数量函数
$scope.add = function(index) {
$scope.Product[index].quantity++;
};
//所有商品总价函数
$scope.totalQuantity = function() {
var allprice = 0
for(var i = 0; i < $scope.Product.length; i++) {
allprice += $scope.Product[i].quantity * $scope.Product[i].price;
};
return allprice;
};
//购买总数量函数
$scope.numAll = function() {
var numAlls = 0
for(var i = 0; i < $scope.Product.length; i++) {
numAlls += $scope.Product[i].quantity;
};
return numAlls;
};
//删除当前商品
$scope.remove = function(index) {
if(confirm("确定要清空数据吗")) {
$scope.Product.splice(index, 1)
};
};
//清空购物车
$scope.removeAll = function() {
if(confirm("你确定套清空购物车所有商品吗?")) {
$scope.Product = [];
};
};
//解决输入框输入负数时变为1
$scope.change = function(index) {
if($scope.Product[index].quantity >= 1) {} else {
$scope.Product[index].quantity = 1;
};
};
});
</script>
</body>
</html>
