HTML+CSS+JS+AngularJS 购物车功能（更新）

最新推荐文章于 2024-04-03 01:40:46 发布

四夕520

最新推荐文章于 2024-04-03 01:40:46 发布

阅读量399

点赞数

本文链接：https://blog.csdn.net/Luokaiqin520/article/details/79806555

版权

<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="utf-8" />
<title></title>
<style>
span{
border: 1px solid black;
background-color: #00FF66;
}
.css1{
background-color: palegoldenrod;
}
.css2{
background-color: palegreen;
}
</style>


<script type="text/javascript" src="libs/angular.min.js" ></script>
<script>
//2.定义模板
var app = angular.module("App",[]);
//3.定义控制器
app.controller("mykzq",function($scope){
//4.数据
$scope.datas=[
{"gid":001,"gname":"手机", "gnum":3,"gprice":1000,"gcount":3000,"box":false},
{"gid":002, "gname":"电脑","gnum":3,"gprice":2000,"gcount":6000,"box":false},
{"gid":003, "gname":"电视","gnum":6,"gprice":500,"gcount":3000,"box":false}];

//5.实现删除的功能
$scope.remove=function($index){
//根据下标$index 使用splice()方法进行单一删除
$scope.datas.splice($index,1);
}

//6.实现计算总数的功能
$scope.gnums = function(){
//定义总价初始值为0
var a = 0;
//循环数组
for(var i=0;i<$scope.datas.length;i++){
//总价+=每个数量
a+=$scope.datas[i].gnum;
}
//最后返回总数
return a;
}

//7.实现计算总价的功能
$scope.gprices = function(){
//定义总价初始值为0
var b = 0;
//循环数组
for(var x=0;x<$scope.datas.length;x++){
//总价+=每个数量
b+=$scope.datas[x].gnum*$scope.datas[x].gprice;
}
//最后返回总价
return b;
}

//8.实现清空购物车的功能
$scope.removeAll = function(){
//设置数组为空
$scope.datas=[];
}

//9.实现当商品数量减少到小于1的时候，提示“确定要删除该产品吗？”，点击确定，删除该行数据。
$scope.chan=function($index){
//循环数组
if($scope.datas[$index].gnum<=0){
//弹出提示框
var f = confirm("确定要删除该产品吗？");
//点击提示框确定，进行删除该商品
if(f){
$scope.datas.splice($index,1);
}
}
}

//10.判断复选框的状态
$scope.boxChen = function($index){
//点击复选框时
if($scope.datas[$index].box){
//先将复选框状态设置为false
$scope.datas[$index].box=false;
}else{
//再设置复选框状态为true
$scope.datas[$index].box=true;
}
}

//11.选中复选框删除的功能
$scope.deletegoods = function(){

//定义变量为false
var flay=false;//用于点击复选框是进行删除
var aa = false;//用于弹出“删除成功”

//循环数组
for (var x = 0;x<$scope.datas.length;x++) {
//判断数组中复选框的状态值
if($scope.datas[x].box){
//若为选中则设置变量为true
flay = true;
}
}
//判断变量不等于true时，弹出请选择需要删除的数据
if(!flay){
alert("请选择需要删除的数据");
}else{
//等于true时，则进行删除
if(confirm("确定要删除吗？")){
//循环数组
for (var x = 0;x<$scope.datas.length;x++) {
//判断数组中复选框的状态值
if($scope.datas[x].box){
//若为true(选中)则删除
$scope.datas.splice(x,1);
//并将下标进行减一
x--;
//变量重新设置为true
flay = true;
aa=true;
}
}
}
//判断如果删除成功，则弹出
if(aa){
//删除后弹出删除成功
alert("删除成功");
}
}

}

$scope.selectAll = function(){

}

});
</script>
</head>
<body ng-controller="mykzq">
<center>
<h1 style="background-color: #D7FF86; width: 250px;">我的购物车详情</h1>


<input type="text" placeholder="根据商品名称查询" ng-model="select" style="margin-left: 600px; border-radius: 20px;margin-bottom: 10px;
background-color: yellow;"/>


<table style="width: 800px; background-color: #999999;" border="1" cellspacing="0">
<tr>


<th>商品编号<input type="button" value="∧" ng-click="orderkey='gid'"/></th>
<th>商品名称</th>
<th>商品数量</th>
<th>商品单价</th>


<th>价格小计<input type="button" value="∨" ng-click="orderkey='-gnum*gprice'"/></th>
<th>操作</th>


<th><input type="checkbox" ng-click="selectAll($event)"/></th>
</tr>


<tr ng-repeat="x in datas | orderBy:orderkey | filter:{gname:select}" class="{{$even?'css1':'css2'}}">
<td>{{x.gid}}</td>
<td>{{x.gname}}</td>


<td><input type="number" ng-model="x.gnum" ng-change="chan($index)"/></td>
<td>{{x.gprice}}</td>
<td>{{x.gnum*x.gprice}}</td>


<td><button ng-click="remove($index)" style="background-color: yellow;border-radius: 10px;">删除</button></td>
<td><input type="checkbox" ng-click="boxChen($index)" /></td>
</tr>
</table>

<div style="margin-top: 20px;">
<span>商品总数:{{gnums()}}</span>
<span style="margin-left: 145px;">商品总价：{{gprices()}}</span>


<input type="button" value="清空购物车" ng-click="removeAll()" style="background-color: yellow; border-radius: 20px;margin-left: 145px;"/>


<input type="button" value="删除" ng-click="deletegoods()" style="background-color: yellow; border-radius: 20px;margin-left: 145px;"/>

</div>
</center>

</body>
</html>

四夕520

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS+JS+AngularJS 购物车功能（更新）

&lt;!DOCTYPE html&gt;&lt;html ng-app="App"&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; span{ border: 1px solid black; backg
复制链接

扫一扫