Next, you implement the products view to provide the user with a list of products to choose from. In this example, the shopping page is very basic: only a single page with a list of prints to buy. Although it is basic, it is enough to demonstrate the implementation of the shopping cart and keeps the code simple.
Listing 28.13 is an AngularJS partial that is loaded into the view when $scope.content
is set to products.html
. The code uses ng-repeat
on the products that are initialized when shoppingController
is initialized. Notice that the product information is displayed on the page by using expressions such as {{product.name}}
.
Also notice that when the user clicks the <img>
element, the setProduct()
function is called in the controller. That function sets the current $scope.product
value and changes the $scope.content
value to product.html
. Figure 28.2 shows the rendered products view.
01 <div id="productsContainer">
02 <div class="listItem" ng-repeat="product in products">
03 <img class="listImg" ng-click="setProduct(product._id)"
04 ng-src="../images/{{product.imagefile}}" />
05 <span class="prodName">{{product.name}}</span>
06 <span class="price">{{product.price|currency}}</span>
07 </div>
08 </div>