angular+bootstrap写的简易购物车

最新推荐文章于 2023-04-21 18:09:12 发布

frontEnd-Engineer

最新推荐文章于 2023-04-21 18:09:12 发布

阅读量1.1k

点赞数

分类专栏： angular 文章标签： angular 购物车商品增加修改

本文链接：https://blog.csdn.net/qq_36341800/article/details/76144421

版权

angular 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

直奔主题吧，抽时间使用angular和bootstrap写了一个简单地购物车，实现商品数量的添加，修改和删除

1. html页面代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.container {
padding-top: 30px;
}

.shortA {
display: inline-block;
width: 50px;
}

.shortA input {
width: 100%;
height: 32px;
line-height: 32px;
border-radius: 4px;
text-align: center;
}

.form-control {
padding-left: 10px;
padding-right: 0;
}
</style>
</head>
<body ng-app="myApp">
<div class="container" ng-controller="cartController">
<form class="form-inline">
<div class="form-group">
<label for="goodsName">商品名称 </label>
<input type="text" class="form-control" ng-model="addCart.name" id="goodsName" placeholder="商品名称">
</div>

<div class="form-group">
<label for="goodsPrice">商品单价 </label>
<input type="number" class="form-control" ng-model="addCart.price" id="goodsPrice" placeholder="商品单价">
</div>

<div class="form-group">
<label for="goodsNum">数量 </label>
<input type="number" class="form-control" ng-model="addCart.quality" id="goodsNum" placeholder="商品数量">
</div>

<button type="submit" class="btn btn-success" ng-click="addNewCart()">添加商品</button>
</form>
<table class="table">
<thead>
<tr>
<th>产品编号</th>
<th>产品名称</th>
<th>购买数量</th>
<th>产品单价</th>
<th>产品总价</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in cart track by $index">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>
<a type="button" class="btn btn-primary" ng-click="changeCartNum($index, 0)">-</a>
<a class="shortA"><input type="text" name="" value="" ng-model="item.quality"></a>
<a type="button" class="btn btn-primary" ng-click="changeCartNum($index, 1)">+</a>
</td>
<td>{{ item.price }}</td>
<td>{{ item.price * item.quality }}</td>
<td><button type="button" class="btn btn-danger" ng-click="deleteCart($index)">删除</button></td>
</tr>
<tr ng-if="cartEmpty">
<td colspan="6">呜呜呜，购物车空空去也，快去添加吧！</td>
</tr>
<tr>
<td>总购买价 </td>
<td> {{ totalPrice() }}</td>
<td>总购买数量</td>
<td>{{ totaNmu() }}</td>
<td colspan="2"><button type="button" class="btn btn-danger" ng-click="clearAllCart()">清空购物车</button></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

2. 控制器部分代码：

angular.module('myApp', [])
.controller('cartController', function($scope, ) {
$scope.cart = [{
id: 1,
name: 'iphone5s',
quality: 3,
price: 4300
},
{
id: 2,
name: 'xiaomi',
quality: 2,
price: 2200
},
{
id: 3,
name: 'T-shirt',
quality: 5,
price: 150
},
{
id: 4,
name: 'weibo',
quality: 5,
price: 150
}
];
$scope.addCart = {
id: null,
name: '',
quality: null,
price: null
};
$scope.cartEmpty = false;
//计算购物车总价
$scope.totalPrice = function() {
var total = 0,
num = 0;
angular.forEach($scope.cart, function(item) {
total += item.quality * item.price;
num += item.quality
})
return total;
},
//计算购物车总数量
$scope.totaNmu = function() {
var num = 0;
angular.forEach($scope.cart, function(item) {
num += item.quality
})
return num;
},
//删除商品
$scope.deleteCart = function(obj) {
console.log(obj);
$scope.cart.splice(obj, 1);
return $scope.cart;
},
//操作商品数量
$scope.changeCartNum = function(obj, sign) {
if (sign == 1) {
$scope.cart[obj].quality++;
} else if (sign == 0 && $scope.cart[obj].quality > 1) {
$scope.cart[obj].quality--;
} else {
alert('亲，只剩一个了，不能再少了');
}
},
//清空购物车
$scope.clearAllCart = function() {
$scope.cart = [];
$scope.cartEmpty = true;
},
//添加购物商品
$scope.addNewCart = function() {
$scope.addCart.id = $scope.cart.length + 1;
$scope.cart.push($scope.addCart);
$scope.addCart = {};
}
})

frontEnd-Engineer

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
angular+bootstrap写的简易购物车

直奔主题吧，抽时间使用angular和bootstrap写了一个简单地购物车，实现商品数量的添加，修改和删除1. html页面代码购物车 .container { padding-top: 30px; } .shortA {
复制链接

扫一扫