Add built-in directive p2

Author: codeaholicguy

angular-builtin-directive-p2/.gitignore

@@ -0,0 +1,2 @@
+.idea
+angular-builtin-directive-p2.iml

angular-builtin-directive-p2/app.js

@@ -11,22 +11,52 @@
 
     var products = [
         {
-            name: 'Apple iPad Air 2 64G',
+            name: 'Apple iPad Air 2 Wifi/4G 16G',
             price: 499,
-            description: 'Apple iPad Air 2 ra mắt là chiếc máy tính bảng 9.7 inch mỏng và nhẹ nhất hiện nay',
-            inStock: true
+            description: 'Một bước ngoặt trong thiết kế của Apple  vừa tinh tế, vừa sang trọng và thời thượng và những cải tiến đáng giá. Apple iPad Air 2 ra mắt là chiếc máy tính bảng 9.7 inch mỏng và nhẹ nhất hiện nay',
+            inStock: true,
+            images: [
+                {
+                    full: "images/ipad.png",
+                    thumb: "images/ipad.png"
+                },
+                {
+                    full: "images/ipad.png",
+                    thumb: "images/ipad.png"
+                }
+            ]
         },
         {
-            name: 'Apple iPhone 6s',
+            name: 'Apple iPad Air 2 Wifi/4G 64G',
             price: 599,
-            description: 'Một bước ngoặt trong thiết kế của Apple  vừa tinh tế, vừa sang trọng và thời thượng và những cải tiến đáng giá',
-            inStock: false
+            description: 'Một bước ngoặt trong thiết kế của Apple  vừa tinh tế, vừa sang trọng và thời thượng và những cải tiến đáng giá. Apple iPad Air 2 ra mắt là chiếc máy tính bảng 9.7 inch mỏng và nhẹ nhất hiện nay',
+            inStock: true,
+            images: [
+                {
+                    full: "images/ipad.png",
+                    thumb: "images/ipad.png"
+                },
+                {
+                    full: "images/ipad.png",
+                    thumb: "images/ipad.png"
+                }
+            ]
         },
         {
-            name: 'Apple iPhone 6s Plus',
+            name: 'Apple iPad Air 2 Wifi/4G 128G',
             price: 699,
-            description: 'Một bước ngoặt trong thiết kế của Apple  vừa tinh tế, vừa sang trọng và thời thượng và những cải tiến đáng giá',
-            inStock: true
+            description: 'Một bước ngoặt trong thiết kế của Apple  vừa tinh tế, vừa sang trọng và thời thượng và những cải tiến đáng giá. Apple iPad Air 2 ra mắt là chiếc máy tính bảng 9.7 inch mỏng và nhẹ nhất hiện nay',
+            inStock: true,
+            images: [
+                {
+                    full: "images/ipad.png",
+                    thumb: "images/ipad.png"
+                },
+                {
+                    full: "images/ipad.png",
+                    thumb: "images/ipad.png"
+                }
+            ]
         }
     ]
 

angular-builtin-directive-p2/images/ipad.png

@@ -13,19 +13,44 @@
 
 <div class="container">
     <div class="page-header"></div>
-    <div class="panel panel-default col-md-5" ng-controller="StoreController as store">
-        <div class="panel-body" ng-repeat="product in store.products">
+    <div class="panel panel-default col-md-12" ng-controller="StoreController as store">
+        <div class="panel-body col-md-4" ng-repeat="product in store.products">
             <h1>{{product.name}}</h1>
 
+            <div class="thumbnail">
+                <img ng-src="{{product.images[0].thumb}}">
+            </div>
+
             <h2>$ {{product.price}}</h2>
 
-            <p>{{product.description}}</p>
             <button class="btn btn-primary" ng-show="product.inStock">Thêm vào giỏ</button>
+
+            <section ng-init="tab = 1">
+                <ul class="nav nav-pills">
+                    <li><a ng-click="tab = 1" href>Giới thiệu</a></li>
+                    <li><a ng-click="tab = 2" href>Cấu hình</a></li>
+                    <li><a ng-click="tab = 3" href>Đánh giá</a></li>
+                </ul>
+                <div class="panel" ng-show="tab === 1">
+                    <h4>Giới thiệu</h4>
+
+                    <p>{{product.description}}</p>
+                </div>
+                <div class="panel" ng-show="tab === 2">
+                    <h4>Cấu hình</h4>
+
+                    <p>None yet</p>
+                </div>
+                <div class="panel" ng-show="tab === 3">
+                    <h4>Đánh giá</h4>
+
+                    <p>None yet</p>
+                </div>
+            </section>
         </div>
     </div>
 </div>
 
-
 <!-- Vendor -->
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>