网页购物车增删改查小demo(AngularJS)

最新推荐文章于 2023-04-03 21:31:00 发布

pipixiaXX

最新推荐文章于 2023-04-03 21:31:00 发布

阅读量625

点赞数

本文链接：https://blog.csdn.net/dongbowen_/article/details/78544159

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.js"></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.goods=[{
name:"鼠标",num:1,price:101
},{
name:"键盘",num:3,price:601
},{
name:"主机",num:1,price:3001
}];
$scope.delete=function(index){
//删除指定下标
$scope.goods.splice(index,1);
$scope.allPrice=0;
for(index in $scope.goods){
var zz=$scope.goods[index].num*$scope.goods[index].price;
$scope.allPrice=zz+$scope.allPrice;
}
}
//总金额
$scope.allPrice=0;
for(index in $scope.goods){
var zz=$scope.goods[index].num*$scope.goods[index].price;
$scope.allPrice=zz+$scope.allPrice;
}
//隐藏标签
$scope.isShow=function(){
if($scope.goods.length > 0){
return true;
}else{
return false;
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>我的购物车</h3>
<table ng-if="isShow()" border="1px solid black" cellpadding="20" cellspacing="0">
<thead>
<tr>
<th>商品名称</th>
<th>商品数量</th>
<th>商品单价</th>
<th>商品小计</th>
<th>商品操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="good in goods">
<td>{{good.name}}</td>
<td>{{good.num}}</td>
<td>{{good.price | currency:"RMB ￥"}}</td>
<td>{{good.num*good.price | currency:"RMB ￥"}}</td>
<td><button ng-click="delete($index)">删除</button></td>
</tr>
<tr>
<td colspan="3">总金额</td>
<td>{{allPrice | currency:"RMB ￥"}}</td>
<td></td>
</tr>
</tbody>
</table>
<p ng-if="!isShow()">购物车为空!</p>
</center>
</body>
</html>

pipixiaXX

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页购物车增删改查小demo(AngularJS)

var app=angular.module("myApp",[]);app.controller("myCtrl",function($scope){$scope.goods=[{name:"鼠标",num:1,price:101},{name:"键盘",num:3,price:601},{name:"主机",num:1,price:3001}];$scope
复制链接

扫一扫