angular JS购物车删除增加

最新推荐文章于 2024-05-28 18:30:26 发布

bai1002

最新推荐文章于 2024-05-28 18:30:26 发布

阅读量422

点赞数 2

文章标签： angular javascript

本文链接：https://blog.csdn.net/bai981002/article/details/78337853

版权

<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>

<script src="angular.min.js"></script>
<script src="jquery-3.2.1.min.js"></script>
<style>
.shanchu{
background-color: aqua;
}
.jiahao{
background-color: aqua;
}
.jianhao{
background-color: aqua;
}
.qingkong{
background-color: red;
}
</style>

<script>
var myapp=angular.module("myapp",[]);
myapp.controller("myCtrl",function ($scope) {
$scope.arr=[
{name:"苹果4", price:12.90,quantity:2,totalprice:25.80},
{name:"苹果5", price:15.00,quantity:1,totalprice:15.00},
{name:"苹果6", price:20.00,quantity:2,totalprice:20.00},
{name:"苹果7", price:25.0,quantity:2,totalprice:25.00}
]
//减少数量
$scope.reduce=function (index) {
if($scope.arr[index].quantity>1){
$scope.arr[index].quantity--;

}else{
$scope.remove(index);
}
}
$scope.add = function(index){
$scope.arr[index].quantity++;
}
//删除
$scope.remove = function(index){
if(confirm("确定要删除当前商品么？")){
$scope.arr.splice(index,1)
}
}
//清空购物车
$scope.removeAll = function(){
if(confirm("你确定清空购物车所有商品吗?")){
$scope.arr = [];
}
}
//点击到1时删除
$scope.change = function(index){
if ( $scope.Product[index].quantity >= 1) {

}else{
$scope.Product[index].quantity = 1;
}

}
//购买的总数
$scope.numAll = function(){
var numAlls = 0
for(var i = 0 ; i <$scope.arr.length;i++ ){
numAlls += $scope.arr[i].quantity;
}
return numAlls;
}
//购买的总价
$scope.totalQuantity = function(){
var allprice = 0
for(var i = 0 ; i <$scope.arr.length;i++ ){
allprice += $scope.arr[i].quantity * $scope.arr[i].price;
}
return allprice;
}

})
</script>

</head>
<body ng-app="myapp">
<h2>我的购物车</h2>
<div ng-controller="myCtrl">
<table border="1px">
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>商品总价</th>
<th>操作</th>
</tr>
<tr ng-repeat="item in arr" >
<td>{{item.name}}</td>

<td>{{item.price|currency:"￥"}}</td>
<td>
<button ng-click="reduce($index)" class="jianhao">-</button>
<input type="text" class="num" ng-model="item.quantity" ng-change="change($index)" />
<button ng-click="add($index)" class="jiahao">+</button>
</td>
<td>{{item.price*item.quantity|currency:"￥"}}</td>
<td><button ng-click="remove($index)" class="shanchu">删除</button></td>
</tr>

</table>
<div id="foot"><span>总价为:</span><span ng-bind="totalQuantity()"></span><span>购买数量</span>
<span >{{numAll()}}</span>
<button ng-click="removeAll()" class="qingkong">清空购物车</button>
</div>

</div>

</body>
</html>