总价

最新推荐文章于 2024-12-21 11:49:54 发布

原创最新推荐文章于 2024-12-21 11:49:54 发布 · 254 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用AngularJS实现的简单购物车应用案例。该应用包括商品列表展示、增删商品数量、移除商品及计算商品总价等功能。通过实际代码展示了AngularJS的数据绑定、指令和服务等特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="lib/js/angular/angular.js" ></script>
<style>
table tr:nth-child(odd){
background: greenyellow;
}
table tr:nth-child(even){
background: red;
}
</style>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.datas=[{
gid:001,
gname:"手机",
gnum:3,
gprice:1000,
},{
gid:002,
gname:"电脑",
gnum:3,
gprice:2000,
},{
gid:003,
gname:"电视",
gnum:6,
gprice:500,
}];
//删除
$scope.sc=function(i){
$scope.datas.splice(i,1);
}
//总数量
$scope.snum=function(){
count=0;
for(var i in $scope.datas){
count=count+$scope.datas[i].gnum;
}
return count;
}
//总金额
$scope.sum=function(){
count=0;
for(var i in $scope.datas){
count=count+$scope.datas[i].gprice*$scope.datas[i].gnum;
}
return count;
}
//加，减
$scope.count=function(num,sname){
for(var i=0;i<$scope.datas.length;i++){
if($scope.datas[i].gname==sname){
if($scope.datas[i].gnum==1 && num==-1){
var f=confirm("是否确认删除");
if(f){
$scope.datas.splice(i,1);
}
}
else{
$scope.datas[i].gnum=$scope.datas[i].gnum+num;
}
}
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<h1>我的购物车详情</h1>
<input type="text" placeholder="根据名称查询" ng-model="name" ng-init="name=''" style="border-radius: 8px;background: yellow;"/>
<table border="1" cellpadding="1px" cellspacing="1px">
<tr>
<td ng-click="px='gid';sj=!sj">商品编号</td>
<td>商品名称</td>
<td>商品数量</td>
<td>商品单价</td>
<td ng-click="px='gprice';sj=!sj">价格小计</td>
<td>操作</td>
</tr>
<tr ng-repeat="d in datas|orderBy:px:sj|filter:{gname:name}">
<td>{{d.gid}}</td>
<td>{{d.gname}}</td>
<td> <input type="text" ng-model="d.gnum" style="width: 30px;"/>
<button ng-click="count(+1,d.gname)"><img src="img/arrow_up.png"</button>
<button ng-click="count(-1,d.gname)"><img src="img/arrow_downlad.png" </button>
</td>
<td>{{d.gprice}}</td>
<td>{{d.gnum*d.gprice}}</td>
<td><button ng-click="sc($index)" style="background: yellow;border-radius: 5px;">移除</button></td>
</tr>
</table>
<button style="background: greenyellow;">商品总数:{{snum()}}</button>
<button style="background: greenyellow;">商品总价:{{sum()}}</button>
<button style="background: greenyellow;">清空购物车</button>

</body>
</html>