product-panels.html 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <section>
  2. <ul class="nav nav-pills">
  3. <li ng-class="{ active:panels.isSelected(1) }">
  4. <a ng-click="panels.selectTab(1)">Description</a></li>
  5. <li ng-class="{ active:panels.isSelected(2) }">
  6. <a ng-click="panels.selectTab(2)">Specifications</a></li>
  7. <li ng-class="{ active:panels.isSelected(3) }">
  8. <a ng-click="panels.selectTab(3)">Reviews</a></li>
  9. </ul>
  10. <div class="panel" ng-show="panels.isSelected(1)">
  11. <h4>Description</h4>
  12. <p>{{ product.description }}</p>
  13. </div>
  14. <div class="panel" ng-show="panels.isSelected(2)" product-specs></div>
  15. <div class="panel" ng-show="panels.isSelected(3)">
  16. <h4>Reviews</h4>
  17. <blockquote ng-repeat="review in product.reviews">
  18. <b>Stars: {{ review.stars }}</b>
  19. {{ review.body }}
  20. <cite>by: {{ review.author }} on {{ review.createdOn | date }}</cite>
  21. </blockquote>
  22. <form name="reviewForm" novalidate
  23. ng-controller="ReviewController as reviewCtrl"
  24. ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)">
  25. <blockquote>
  26. <b>Stars: {{ reviewCtrl.review.stars }}</b>
  27. {{ reviewCtrl.review.body }}
  28. <cite>by: {{ reviewCtrl.review.author }}</cite>
  29. </blockquote>
  30. <h4>Submit a Review</h4>
  31. <fieldset class="form-group">
  32. <select class="form-control"
  33. ng-model="reviewCtrl.review.stars"
  34. required>
  35. <option value disabled selected class>Rate the product</option>
  36. <option value="1">1 star</option>
  37. <option value="2">2 stars</option>
  38. <option value="3">3 stars</option>
  39. <option value="4">4 stars</option>
  40. <option value="5">5 stars</option>
  41. </select>
  42. </fieldset>
  43. <fieldset class="form-group">
  44. <textarea class="form-control"
  45. ng-model="reviewCtrl.review.body"
  46. required
  47. placeholder="Write a short review of the product"></textarea>
  48. </fieldset>
  49. <fieldset class="form-group">
  50. <label>by:</label>
  51. <input type="email"
  52. class="form-control"
  53. ng-model="reviewCtrl.review.author"
  54. required
  55. placeholder="john.doe@example.com"/>
  56. </fieldset>
  57. <div>reviewForm is {{ reviewForm.$valid }}</div>
  58. <input type="submit" value="Submit"/>
  59. </form>
  60. </div>
  61. </section>