fgm
/
front__codeschool-angular-1


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
							<!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 }} on {{ review.createdOn | date }}</cite>
        </blockquote>

        <form name="reviewForm" novalidate
              ng-controller="ReviewController as reviewCtrl"
              ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)">
          <blockquote>
              <b>Stars: {{ reviewCtrl.review.stars }}</b>
            {{ reviewCtrl.review.body }}
            <cite>by: {{ reviewCtrl.review.author }}</cite>
          </blockquote>
          <h4>Submit a Review</h4>
          <fieldset class="form-group">
            <select class="form-control" ng-model="reviewCtrl.review.stars" required>
              <option value disabled selected class>Rate the product</option>
              <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>
          </fieldset>

          <fieldset class="form-group">
            <textarea class="form-control" ng-model="reviewCtrl.review.body" required placeholder="Write a short review of the product"></textarea>
          </fieldset>

          <fieldset class="form-group">
            <label>by:</label>
            <input type="email" class="form-control" ng-model="reviewCtrl.review.author" required placeholder="john.doe@example.com" />
          </fieldset>

          <div>reviewForm is {{ reviewForm.$valid }}</div>
          <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>