使用angular实现购物车列表

最新推荐文章于 2019-06-11 15:57:18 发布

原创最新推荐文章于 2019-06-11 15:57:18 发布 · 置顶 · 515 阅读

0 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

47 篇文章

订阅专栏

本文介绍了一个使用Angular开发的购物车应用程序实例。该应用包括输入框用于快速搜索商品，表格显示了购物车中商品的各项信息，如产品编号、名称、数量等，并提供了增加、减少和删除商品的操作。

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

查看路径https://eight1302.github.io/angular/index.html

<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>