使用angular實現購物車列表
查看路徑https://eight1302.github.io/angular/index.html
<body ng-app>
<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>
