Implementing the Cart View

Once the user clicks the Add to Cart button, the item is added to the cart, and the view changes to the cart view. The cart view, shown in Listing 28.15, provides a list of products that currently exist in the cart, a price total, and buttons to check out or go back to shopping.

The following code implements a delete link in the cart to remove an item. It calls the function deleteFromCart(), located in the controller, and passes product._id to identify which item to delete:

Click here to view code image

<span class="delete"
      ng-click="deleteFromCart(product._id)">Remove</span>

Also, a quantity field links directly to the item.quantity element, where an item comes from the ng-repeat of the customer.shopping cart array.

A controller function calculates the shipping value and total value; it is linked by the following expression code, where the |currency filter formats the values of price, shipping, and total:

Click here to view code image

<span class="price">{{cartTotal()|currency}}</span>

The cool part about AngularJS is that because the quantity fields are linked directly to the scope, as you change them, the shipping and total values change as well. Figure 28.4 shows the rendered cart view.

Listing 28.15 cart.html: Implementing the partial shopping cart template

Click here to view code image

01 <div id="cartsContainer">
02   <div class="listItem" ng-repeat="item in customer.cart"
03     ng-init="product=item.product[0]">
04     <img class="listImg" ng-click="setProduct(product._id)"
05          ng-src="../images/{{product.imagefile}}" />
06     <span class="prodName">{{product.name}}</span>
07     <span >
08       <span class="price">{{product.price|currency}}</span>
09       <input class="quantity" type="text" ng-model="item.quantity" />
10       <label class="quantity">Quantity</label>
11       <span class="delete"
12             ng-click="deleteFromCart(product._id)">Remove</span>
13     </span>
14   </div>
15   <hr>
16   <div>
17     <span>Shipping</span>
18     <span class="price">{{shipping|currency}}</span>
19   </div>
20   <hr>
21   <div>
22     <span>Total</span>
23     <span class="price">{{cartTotal()|currency}}</span>
24    </div>
25    <hr>
26   <div>
27       <span class="button" ng-click="checkout()"
28             ng-hide="customer.cart.length==0">
29         Checkout
30       </span>
31       <span class="button" ng-click="setContent('products.html')">
32         Continue Shopping
33       </span>
34   </div>
35 </div>

Figure 28.4 The cart view allows the customer to change the quantity of items, remove items, and check out.