12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061 |
- <!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>
- <p>None yet</p>
- </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>
|