<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{
width: 600px;
}
table tr:nth-child(odd){
background:lightsteelblue;
}
table button{
background: blue;
}
</style>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script>
var app=angular.module("myapp",[]);
app.controller("modec",function($scope){
$scope.px='-number';
$scope.sj=true;
$scope.stus=[{
ck:false,
name:'香梨',
price:12.00,
number:2,
},{
ck:false,
name:'苹果',
price:15.00,
number:1,
},{
ck:false,
name:'香蕉',
price:15.00,
number:1,
}];
//添加
$scope.add=function(){
$scope.stus.push({
ck:false,
name:'甜橙',
price:11.00,
number:1,
})
}
//清空购物车
$scope.delall=function(){
for (var i=0;i<$scope.stus.length;i++) {
if($scope.stus[i].ck==true){
$scope.stus.splice(i,1);
i--;
}
}
}
//全选/全不选
$scope.ckall=function(){
for (var i=0;i<$scope.stus.length;i++) {
$scope.stus[i].ck=$scope.flag;
}
}
//点击按钮删除
$scope.del=function(index){
$scope.stus.splice(index,1)
}
//加减
$scope.count=function(index,i){
$scope.stus[i].number=$scope.stus[i].number+index;
if($scope.stus[i].number==0){
var f=confirm("您是否将该商品移除购物车?");
if(f==true){
$scope.stus.splice(i,1);
}else if(f=false){
}
}else if($scope.stus.length == 0){
alter('你的购物车为空');
}
}
//计算总价
$scope.smoney=function(){
var smoney=0;
for (var i=0;i<$scope.stus.length;i++) {
smoney+=$scope.stus[i].price*$scope.stus[i].number;
}
return smoney;
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="modec">
<h2>我的购物车</h2><br />
<!-- 给input设置圆角边框style="border-radius: 10px;-->
<input style="border-radius: 10px;" ng-model="rename" placeholder="输入关键字搜素" />
<select ng-model="px">
<option value="-number">按数量正序排列</option>
<option value="+number">按数量倒序排列</option>
</select>
<button style="background: greenyellow; border-radius:6px; width: 60px;" ng-click="add()">入库</button>
<br />
<button style="background:red; color: #ffff;" ng-click="delall()">清空购物车</button>
<table border="1" cellspacing="0">
<tr>
<td><input type="checkbox" ng-click="ckall()" ng-model="flag"></td>
<td>用户名</td>
<td>单价</td>
<td ng-click="px='number';sj=!sj">数量</td>
<td>小计</td>
<td>操作</td>
</tr>
<tr ng-repeat="s in stus|orderBy:px|filter:{name:rename}">
<td><input type="checkbox" ng-model="s.ck"/></td>
<td>{{s.name}}</td>
<td>{{s.name}}</td>
<td>{{s.price|currency:"¥"}}</td>
<td><button ng-click="count(+1,$index)">+</button> <input style="width: 30px;" ng-model="s.number" /><button ng-click="count(-1,$index)">-</button> </td>
<td><button ng-click="del($index)">删除</button></td>
</tr>
</table>
总价为:{{smoney()|currency:"¥"}}
</body>
</html>
购物车弹出框加减
最新推荐文章于 2024-05-16 14:59:07 发布