<!DOCTYPE html> <html ng-app="gemStore"> <head lang="en"> <meta charset="UTF-8"> <title>AngularJS Store</title> <link rel="stylesheet" type="text/css" href="../bootstrap/dist/css/bootstrap.min.css"/> <link rel="stylesheet" type="text/css" href="app.css"/> <script type="text/javascript" src="../angular/angular.min.js"></script> <script type="text/javascript" src="app.js"></script> </head> <body ng-controller="StoreController as store"> <!-- Products Container --> <div class="list-group" ng-hide="store.product.soldOut"> <!-- Product container --> <div class="list-group-item" ng-repeat="product in store.products"> <h3> {{product.name}} <em class="pull-right">{{product.price | currency}}</em> </h3> <section ng-controller="PanelController as panel"> <ul class="nav nav-pills"> <li ng-class="{ active:panel.isSelected(1) }"><a ng-click="panel.selectTab(1)">Description</a></li> <li ng-class="{ active:panel.isSelected(2) }"><a ng-click="panel.selectTab(2)">Specifications</a></li> <li ng-class="{ active:panel.isSelected(3) }"><a ng-click="panel.selectTab(3)">Reviews</a></li> </ul> <div class="panel" ng-show="panel.isSelected(1)"> <h4>Description</h4> <p>{{ product.description }}</p> </div> <div class="panel" ng-show="panel.isSelected(2)"> <h4>Specifications</h4> <p>None yet</p> </div> <div class="panel" ng-show="panel.isSelected(3)"> <h4>Reviews</h4> <blockquote ng-repeat="review in product.reviews"> <b>Stars: {{ review.stars }}</b> {{ review.body }} <cite>by: {{ review.author }}</cite> </blockquote> <form name="reviewForm"> <b>Stars: {{ review.stars }}</b> {{ review.body }} <cite>by: {{ review.author }}</cite> <select ng-model="review.stars"> <option value="1">1 star</option> <option value="2">2 stars</option> <option value="3">3 stars</option> <option value="4">4 stars</option> <option value="5">5 stars</option> </select> <textarea ng-model="review.body"></textarea> <label>by:</label> <input type="email" ng-mode="review.author" /> <input type="submit" value="Submit" /> </form> </div> </section> <!-- Image Gallery --> <div class="gallery" ng-show="product.images.length"> <img class="img img-circle img-thumbnail center-block" ng-src="{{product.images[0]}}"/> <ul class="clearfix"> <li class="small-image pull-left thumbnail" ng-repeat="image in product.images"><img ng-src="{{image}}"/></li> </ul> </div> </div> </div> </body> </html>