first_angular/index.html at master · mkidushim/first_angular · GitHub

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
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html ng-app="store">

<head>
    <title></title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body ng-controller="StoreController as store">
    <header>
        <h1 class="text-center">Flatlander Crafted Gems</h1>
        <h2 class="text-center">an Angular store</h2>
    </header>
    <ul class="list-group">
        <li class="list-group-item" ng-repeat="product in store.products">
        	<product-title></product-title>
             <!-- <h1 ng-include="'product_title.html'"></h1>
           <em class="pull-right"><button ng-show="product.canPurchase">Add To Cart</button></em>
            <em class="pull-right">{{product.price | currency}}</em> -->
            <em class="pull-right"><button ng-show="product.canPurchase"> <span class="glyphicon glyphicon-shopping-cart"></span>Add To Cart</button></em>
            <img ng-src="{{product.image}}" />
            <section ng-controller="PanelController as panel">
                <ul class="nav nav-pills">
                    <li ng-class="{active:panel.isSelected(1)}"><a href ng-click="panel.selectTab(1)">Descriptions</a></li>
                    <li ng-class="{active:panel.isSelected(2)}"><a href ng-click="panel.selectTab(2)">Specifications</a></li>
                    <li ng-class="{active:panel.isSelected(3)}"><a href ng-click="panel.selectTab(3)">Reviews</a></li>
                </ul>
                <div class="panel" ng-show="panel.isSelected(1)">
                    <h4>Descriptions</h4>
                    <blockquote>{{product.description}}</blockquote>
                </div>
                <div class="panel" ng-show="panel.isSelected(2)">
                    <h4>Specs</h4>
					<ul class="list-unstyled">
					  <li>
					    <strong>Shine</strong>
					    : {{product.shine}}</li>
					  <li>
					    <strong>Faces</strong>
					    : {{product.faces}}</li>
					  <li>
					    <strong>Rarity</strong>
					    : {{product.rarity}}</li>
					  <li>
					    <strong>Color</strong>
					    : {{product.color}}</li>
					</ul>
                </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}}</cite>
                    </blockquote>
                    <form name="reviewForm" ng-controller="ReviewController as reviewCtrl" ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)" novalidate>
                        <blockquote>
                            <b>Stars: {{reviewCtrl.review.stars}}</b> {{reviewCtrl.review.body}}
                            <cite>{{reviewCtrl.review.author}}</cite>
                        </blockquote>
                        <fieldset class="form-group">
                        	<select ng-model="reviewCtrl.review.stars" class="form-control" ng-options="stars for stars in [5 + ' Stars', 4 + ' Stars', 3 + ' Stars', 2 + ' Stars', 1 + ' Star']" title="Stars" required>
      					<option value>Rate the Product</option>
    					</select>
                           <!--  <select placeHolder="Stars" class="form-control" ng-select="stars for stars in [5,4,3,2,1]" title="Stars" ng-model="reviewCtrl.review.stars" required>
                                <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 ng-selected="" value="5">5 stars</option>
                            </select> -->
                        </fieldset>
                        <fieldset class="form-group">
                            <textarea placeHolder="Write Your Review Here" class="form-control" ng-model="reviewCtrl.review.body" required></textarea>
                        </fieldset>
                        <fieldset class="form-group">
                            <label>By:</label>
                            <input placeHolder="Your E-mail" class="form-control" type="email" ng-model="reviewCtrl.review.author" required/>
                            <!-- <div>reviewForm is {{reviewForm.$valid}}</div> -->
                        </fieldset>
                        <fieldset class="form-group">
                            <input class="form-control" type="submit" value="submit" />
                        </fieldset>
                    </form>
                </div>
            </section>
        </li>
    </ul>
    </div>
    <!-- <section ng-controller="PanelController as panel">
        <ul class="nav nav-pills">
            <li ng-class="{active:panel.isSelected(1)}"><a href ng-click="panel.selectTab(1)">Descriptions</a></li>
            <li ng-class="{active:panel.isSelected(2)}"><a href ng-click="panel.selectTab(2)">Specifications</a></li>
            <li ng-class="{active:panel.isSelected(3)}"><a href ng-click="panel.selectTab(3)">Reviews</a></li>
        </ul>

    <div class="panel" ng-show="panel.isSelected(1)">
        <h4>Descriptions</h4>
        <p>{{product.description}}Hello</p>
    </div>
    <div class="panel" ng-show="panel.isSelected(2)">
        <h4>Specifications</h4>
        <blockquote>none yet</blockquote>
    </div>
    <div class="panel" ng-show="panel.isSelected(3)">
        <h4>Reviews</h4>
        <blockquote>none yet</blockquote>
    </div>
    </section> -->
    <script type="text/javascript" src="app.js"></script>
</body>

</html>