-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
104 lines (100 loc) · 3.91 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html ng-app="store">
<head>
<link rel="stylesheet" type="text/css" href="node_modules\bootstrap\dist\css\bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body ng-controller="StoreController as store">
<h1>Angular Demo</h1>
<hr />
<!-- Products Container -->
<ul class="list-group">
<li class="list-group-item" ng-repeat="product in store.products" ng-hide="product.soldOut">
<!-- Product Container -->
<h3 ng-include="'product-title.html'"></h3>
<!-- Image Gallery -->
<div class="gallery"" ng-show="product.images.length" ng-controller="GalleryController as gallery">
<!-- <img ng-src="{{product.images[0].full}}" width="100px" height="100px" />-->
<img ng-src="{{product.images[gallery.current].full}}" width="100px" height="100px" />
<ul class="list-inline thumbs">
<li class="thumbnail" ng-repeat="image in product.images">
<img ng-src="{{image.thumb}}" width="50px" height="50px" ng-click="gallery.setCurrent($index)"/>
</li>
</ul>
</div>
<section class="tab"" ng-controller="TabController as tab">
<ul class="nav nav-pills">
<li ng-class="{ active:tab.isSelected(1) }">
<a href ng-click="tab.selectTab(1)">Description</a>
</li>
<li ng-class="{ active:tab.isSelected(2) }">
<a href ng-click="tab.selectTab(2)">Specifications</a>
</li>
<li ng-class="{ active:tab.isSelected(3) }">
<a href ng-click="tab.selectTab(3)">Reviews</a>
</li>
</ul>
<div ng-show="tab.isSelected(1)">
<h4>Description</h4>
<p>{{product.description}}</p>
</div>
<div ng-show="tab.isSelected(2)">
<h4>Specifications</h4>
<blockquote>None yet</blockquote>
</div>
<!-- Reviews Tab Content -->
<div ng-show="tab.isSelected(3)">
<!-- Product Review List -->
<ul>
<h4>Reviews</h4>
<li ng-repeat="review in product.reviews">
<blockquote>
<strong>Stars: {{review.stars}}</strong>
{{review.body}}
<cite class="clearfix">by: {{review.author}} on {{review.createdOn | date}}</cite>
</blockquote>
</li>
</ul>
<!-- Review Form -->
<form name="reviewForm" ng-controller="ReviewController as reviewCtrl"
ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)"
novalidate>
<!-- Live Preview -->
<blockquote>
<strong>Stars: {{reviewCtrl.review.stars}}</strong>
{{reviewCtrl.review.body}}
<cite class="clearfix">by: {{reviewCtrl.review.author}}</cite>
</blockquote>
<!-- Review Form -->
<h4>Submit a Review</h4>
<fieldset class="form-group">
<select class="form-control" ng-model="reviewCtrl.review.stars" title="Stars" required>
<option value="">Rate the Product</option>
<option value="5">5 star</option>
<option value="4">4 stars</option>
<option value="3">3 stars</option>
<option value="2">2 stars</option>
<option value="1">1 stars</option>
</select>
</fieldset>
<fieldset class="form-group">
<textarea class="form-control" placeholder="Write a short review of the product..." title="Review" ng-model="reviewCtrl.review.body" required></textarea>
</fieldset>
<fieldset class="form-group">
<input class="form-control" placeholder="[email protected]" ng-model="reviewCtrl.review.author" type="email" required />
</fieldset>
<div>
reviewForm is {{reviewForm.$valid}}
</div>
<fieldset class="form-group">
<input class="btn btn-primary pull-right" type="submit" value="Submit Review" />
</fieldset>
</form>
</div>
</section>
</li>
</ul>
<script src="node_modules\angular\angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>