基于angular的商品购物车结算代码

一款基于angular的商品购物车结算代码，可点击添加或减少商品的数量，可移除某个商品，可在商品清单里搜索某个商品，当然也可以清空整个购物车，购物车非空时总价会随着各种操作而自动变化。

分类：其它特效 > 购物车难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需引入bootstrap样式库，并引入index.js和angluar库，代码如下：

<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/index.js" charset="utf-8"></script>
<script type="text/javascript" src="js/angular.min.js" charset="utf-8"></script>

页面的body部分，需设置好搜索框和购物车表格内容，代码如下：

<div style="margin-left:auto; margin-right:auto; width:600px; padding-top:30px">
	<input  type="text" name="" value=""  ng-model="abc" placeholder="输入关键字快速查找">{{abc}}
</div>
<div ng-controller="cartController" class="container">
	<table class="table" ng-show="cart.length">
		<thead>
			<tr>
				<th>产品编号</th>
				<th>产品名字</th>
				<th>购买数量</th>
				<th>产品单价</th>
				<th>产品总价</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<tr ng-repeat="item in cart| filter:abc">
				<td ng-bind="item.id"></td>
				<td ng-bind="item.name"></td>
				<td>
					<button type="button" ng-click="reduce(item.id)" class="btn btn-primary btn-sm">-</button>
					<input type="text" ng-model="item.quantity" style="text-align: center;">
					<button type="button" ng-click="add(item.id)" class="btn btn-primary btn-sm">+</button>
				</td>
				<td ng-bind="item.price"></td>
				<td ng-bind="item.price*item.quantity"></td>
				<td><button type="button" ng-click="remove(item.id)" class="btn btn-danger btn-sm">移除</button></td>
			</tr>
			<tr>
				<td>总购物价</td>
				<td ng-bind="totalPrice()"></td>
				<td>总购买数量</td>
				<td ng-bind="totalQuantity()"></td>
				<td colspan="2"><button type="button"  ng-click="cart = {}" class="btn btn-danger btn-sm">清空购物车</button></td>
			</tr>
		</tbody>				
	</table>
	<p ng-show="!cart.length">您的购物车已空</p>
</div>