index.html 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <!DOCTYPE html>
  2. <html ng-app="gemStore">
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title>AngularJS Store</title>
  6. <link rel="stylesheet"
  7. type="text/css"
  8. href="../bootstrap/dist/css/bootstrap.min.css"/>
  9. <link rel="stylesheet" type="text/css" href="app.css"/>
  10. <script type="text/javascript" src="../angular/angular.min.js"></script>
  11. <script type="text/javascript" src="app.js"></script>
  12. </head>
  13. <body ng-controller="StoreController as store">
  14. <!-- Products Container -->
  15. <div class="list-group" ng-hide="store.product.soldOut">
  16. <!-- Product container -->
  17. <div class="list-group-item" ng-repeat="product in store.products">
  18. <h3>
  19. {{product.name}}
  20. <em class="pull-right">{{product.price | currency}}</em>
  21. </h3>
  22. <section ng-controller="PanelController as panel">
  23. <ul class="nav nav-pills">
  24. <li ng-class="{ active:panel.isSelected(1) }"><a ng-click="panel.selectTab(1)">Description</a></li>
  25. <li ng-class="{ active:panel.isSelected(2) }"><a ng-click="panel.selectTab(2)">Specifications</a></li>
  26. <li ng-class="{ active:panel.isSelected(3) }"><a ng-click="panel.selectTab(3)">Reviews</a></li>
  27. </ul>
  28. <div class="panel" ng-show="panel.isSelected(1)">
  29. <h4>Description</h4>
  30. <p>{{ product.description }}</p>
  31. </div>
  32. <div class="panel" ng-show="panel.isSelected(2)">
  33. <h4>Specifications</h4>
  34. <p>None yet</p>
  35. </div>
  36. <div class="panel" ng-show="panel.isSelected(3)">
  37. <h4>Reviews</h4>
  38. <blockquote ng-repeat="review in product.reviews">
  39. <b>Stars: {{ review.stars }}</b>
  40. {{ review.body }}
  41. <cite>by: {{ review.author }}</cite>
  42. </blockquote>
  43. <form name="reviewForm">
  44. <b>Stars: {{ review.stars }}</b>
  45. {{ review.body }}
  46. <cite>by: {{ review.author }}</cite>
  47. <select ng-model="review.stars">
  48. <option value="1">1 star</option>
  49. <option value="2">2 stars</option>
  50. <option value="3">3 stars</option>
  51. <option value="4">4 stars</option>
  52. <option value="5">5 stars</option>
  53. </select>
  54. <textarea ng-model="review.body"></textarea>
  55. <label>by:</label>
  56. <input type="email" ng-mode="review.author" />
  57. <input type="submit" value="Submit" />
  58. </form>
  59. </div>
  60. </section>
  61. <!-- Image Gallery -->
  62. <div class="gallery" ng-show="product.images.length">
  63. <img class="img img-circle img-thumbnail center-block"
  64. ng-src="{{product.images[0]}}"/>
  65. <ul class="clearfix">
  66. <li class="small-image pull-left thumbnail"
  67. ng-repeat="image in product.images"><img ng-src="{{image}}"/></li>
  68. </ul>
  69. </div>
  70. </div>
  71. </div>
  72. </body>
  73. </html>