购物车
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
tr td{
width: 100px;
}
</style>
<script src="../lib/js/angular/angular.js"></script>
<script>
angular.module("myapp",[])
.controller("democ",function($scope){
$scope.data=[
{
state:false,
name:"qq",
price:12.9,
num:2,
},
{
state:false,
name:"wx",
price:23.9,
num:1,
},
{
state:false,
name:"wx",
price:99.9,
num:1,
}
];
$scope.update=function(index,numss){
$scope.data[index].num = $scope.data[index].num + numss;
if($scope.data[index].num == 0){
$scope.data.splice(index,1);
}
}
$scope.ckAll=function(){
for(var i in $scope.data){
$scope.data[i].state=$scope.ckall;
}
}
$scope.del=function(obj){
var a = confirm("您是否将该商品移除购物车？");
if(a == true){
$scope.data.splice(obj,1);
}
}
$scope.count = function(){
var con = 0;
for(var i in $scope.data){
con += $scope.data[i].price*$scope.data[i].num;
}
return con;
}
$scope.dels=function(){
for(var i = 0;i<$scope.data.length;i++){
$scope.data.splice(i);
}
}
});
</script>
</head>
<body ng-app="myapp" ng-controller="democ">
<h1>我的购物车</h1>
<hr />
<div style="width: 100%;height: 50px;"><br />
<button style="float: right;height: 30px;color: beige;background-color: red;border: 0px;" ng-click="dels()">清空购物车</button>
</div>
<table border="1" cellspacing="0" style="border-color: beige;">
<tr>
<td><input type="checkbox" ng-model="ckall" ng-click="ckAll()" /></td>
<td><b>name</b></td>
<td><b>price</b></td>
<td><b>number</b></td>
<td><b>totalPrice</b></td>
<td><b>option</b></td>
</tr>
<tr ng-repeat="a in data">
<td><input type="checkbox" ng-model="a.state" /></td>
<td>{{a.name}}</td>
<td>{{a.price|currency:"￥"}}</td>
<td>
<input ng-click="update($index,-1)" style="background-color: blue;border: 0px;color: beige;font-size: 15px;" type="button" value="-" />
<input style="width: 40px;" ng-model="a.num" />
<input ng-click="update($index,1)" style="background-color: blue;border: 0px;color: beige;font-size: 15px;" type="button" value="+" />
</td>
<td>{{a.price*a.num|currency:"￥"}}</td>
<td><button style="background-color: blue;border: 0px;color: beige;" ng-click="del($index)">删除</button></td>
</tr>
</table>
<table border="1" cellspacing="0" style="border-color: beige;">
<tr>
<td style="width: 100%;">总价为:{{count()|currency:"￥"}}</td>
</tr>
</table>
</body>
</html>
浙公网安备 33010602011771号