Implementing the Orders View

When the order is complete, the user sees the orders view, which shows the user’s completed purchases. (There are other ways you can handle this part of the process. For example, you could add another page to display the completed order, or you could just send the user back to the shopping page.)

The orders view, shown in Listing 28.19, displays a list of orders that this customer has completed. The list comes from an ng-repeat directive on the $scope.orders value. The ng-repeat iteration lists the date the order was placed, the status, and the items bought, as shown in Figure 28.8.

Listing 28.19 orders.html: Implementing the partial orders view template

Click here to view code image

01 <div id="reviewContainer">
02   <div class="listItem" ng-repeat="order in orders">
03     <p class="itemTitle">Order #{{$index+1}}</p>
04     <p class="prodDesc">Placed {{order.timestamp|date}}</p>
05     <p class="status">{{order.status}}</p>
06       <div class="listItem" ng-repeat="item in order.items"
07         ng-init="product=item.product[0]">
08         <img class="listImg" ng-click="setProduct(product._id)"
09              ng-src="../images/{{product.imagefile}}" />
10         <span class="prodName">{{product.name}}</span>
11         <span >
12           <span class="price">{{product.price|currency}}</span>
13           <label class="quantity">{{item.quantity}}</label>
14           <label class="quantity">Quantity</label>
15         </span>
16       </div>
17   </div>
18   <div>
19     <span class="button" ng-click="setContent('products.html')">
20       Continue Shopping
21     </span>
22   </div>
23 </div>

Figure 28.8 The orders view shows a list of orders that this customer has placed.