購物車angular代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table tr:nth-child(2n){
background: #009689;
}
</style>
<script src="js/angular.min.js">
</script>
<script >
var app = angular.module("wxhapp",[]);
app.controller("ctrl",function($scope){
$scope.message=[{id:001,gname:'手機',quantity:3,price:1000,jgxj:3000}
,{id:002,gname:'電腦',quantity:3,price:2000,jgxj:6000}
,{id:003,gname:'電視',quantity:6,price:500,jgxj:3000}
];
//刪
$scope.del=function(gname){
for(var i=0;i<$scope.message.length;i++){
if($scope.message[i].gname==gname){
$scope.message.splice(i,1);
}
}
}
//清空購物車
$scope.cart = function(){
$scope.message=[];
}
$scope.cart = function(){
$scope.message=[];
}
//總價
$scope.totalPrice = function(){
var allPrice=0;
for(var i=0;i<$scope.message.length;i++){
allPrice+=$scope.message[i].price*$scope.message[i].quantity;
}
console.log(allPrice,"+++++++++++");
return allPrice;
};
//總購買數量
$scope.totalQuantity = function(){
var sum =0;
for(var i=0;i<$scope.message.length;i++){
sum = sum+$scope.message[i].quantity;
}
return sum;
}
//加減按鈕
$scope.quantity = function(num,sname){
for(var i=0;i<$scope.message.length;i++){
if($scope.message[i].gname==sname){
$scope.message[i].quantity=$scope.message[i].quantity+num;
}
}
}
})
</script>
</head>
<body ng-app="wxhapp" ng-controller="ctrl" >
<h1 align="center">我的購物車</h1>
<input type="text" ng-model="selname" placeholder="根據名稱查詢" />
<select ng-model="px">
<option value="+$index">商品編號</option>
<option value="-jgxj">價格小計</option>
</select>
<table border="1px" >
<tr>
<td>商品編號：</td>
<td>商品名稱：</td>
<td ng-click="px='sl';sj!=sj">商品數量：</td>
<td>商品單價：</td>
<td ng-click="px='xj';sj!=sj">價格小計：</td>
<td>操作</td>
</tr>
<tr ng-repeat="item in message|orderBy:px:sj|filter:{gname:selname}">
<td>{{item.id}}</td>
<td>{{item.gname}}</td>
<td>
<button ng-click="quantity(-1,item.gname)">-</button>
{{item.quantity}}
<button ng-click="quantity(+1,item.gname)">+</button>
</td>
<td ng-bind="item.price"></td>
<td>{{item.jgxj}}</td>
<td><button ng-click="del(g.gname)">移除</button></td>
</tr>
</table>
<tr>
<td>總購物價</td>
<td>{{totalPrice()}}</td>
<td>總購買數量</td>
<td>{{totalQuantity()}}</td>
<td colspan="2"><button ng-click="cart()">清空購物車</button></td>
</tr>
</body>
</html>