Last active
August 29, 2015 14:04
-
-
Save JacobHsu/831df6ea0df89ec47055 to your computer and use it in GitHub Desktop.
#angular.js :Using Gallery Controller
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html ng-app="gemStore"> | |
| <head> | |
| <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> | |
| <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script> | |
| </head> | |
| <body class="list-group" ng-controller="StoreController as store"> | |
| <header> | |
| <h1 class="text-center">Flatlander Crafted Gems</h1> | |
| <h2 class="text-center">– an Angular store –</h2> | |
| </header> | |
| <div class="list-group-item" ng-repeat="product in store.products"> | |
| <h3> | |
| {{product.name}} | |
| <em class="pull-right">{{product.price | currency}}</em> | |
| </h3> | |
| <!-- Image Gallery --> | |
| <div class='gallery' ng-controller="GalleryController as gallery" ng-show="product.images.length"> | |
| <img ng-src="http://dhg7upb7j7jqa.cloudfront.net/shaping_up_with_angular_js/assets/demo/{{product.images[gallery.current]}}" /> | |
| <ul class="list-inline thumbs"> | |
| <li class="thumbnail" ng-repeat="image in product.images"> | |
| <img ng-src="http://dhg7upb7j7jqa.cloudfront.net/shaping_up_with_angular_js/assets/demo/{{image}}" /> | |
| </li> | |
| </ul> | |
| </div> | |
| <section class="tab" ng-controller="TabController as tab"> | |
| <ul class="nav nav-pills"> | |
| <li ng-class="{ active: tab.isSet(1) }"> | |
| <a href ng-click="tab.setTab(1)">Description</a></li> | |
| <li ng-class="{ active: tab.isSet(2) }"> | |
| <a href ng-click="tab.setTab(2)">Specs</a></li> | |
| <li ng-class="{ active: tab.isSet(3) }"> | |
| <a href ng-click="tab.setTab(3)">Reviews</a></li> | |
| </ul> | |
| <div ng-show="tab.isSet(1)"> | |
| <h4>Description</h4> | |
| <blockquote>{{product.description}}</blockquote> | |
| </div> | |
| <div ng-show="tab.isSet(2)"> | |
| <h4>Specs</h4> | |
| <blockquote>Shine: {{product.shine}}</blockquote> | |
| </div> | |
| <div ng-show="tab.isSet(3)"> | |
| <h4>Reviews</h4> | |
| </div> | |
| </section> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function() { | |
| var app = angular.module('gemStore', []); | |
| app.controller('StoreController', function(){ | |
| this.products = gems; | |
| }); | |
| app.controller('TabController', function(){ | |
| this.tab = 1; | |
| this.setTab = function(newValue){ | |
| this.tab = newValue; | |
| }; | |
| this.isSet = function(tabName){ | |
| return this.tab === tabName; | |
| }; | |
| }); | |
| app.controller('GalleryController', function(){ | |
| this.current = 0; | |
| this.setCurrent = function(newGallery){ | |
| this.current = newGallery || 0; | |
| }; | |
| }); | |
| var gems = [ | |
| { | |
| name: 'Azurite', | |
| description: "Some gems have hidden qualities beyond their luster, beyond their shine... Azurite is one of those gems.", | |
| shine: 8, | |
| price: 110.50, | |
| rarity: 7, | |
| color: '#CCC', | |
| faces: 14, | |
| images: [ | |
| "images/gem-02.gif", | |
| "images/gem-05.gif", | |
| "images/gem-09.gif" | |
| ], | |
| reviews: [{ | |
| stars: 5, | |
| body: "I love this gem!", | |
| author: "[email protected]", | |
| createdOn: 1397490980837 | |
| }, { | |
| stars: 1, | |
| body: "This gem sucks.", | |
| author: "[email protected]", | |
| createdOn: 1397490980837 | |
| }] | |
| }, | |
| { | |
| name: 'Bloodstone', | |
| description: "Origin of the Bloodstone is unknown, hence its low value. It has a very high shine and 12 sides, however.", | |
| shine: 9, | |
| price: 22.90, | |
| rarity: 6, | |
| color: '#EEE', | |
| faces: 12, | |
| images: [ | |
| "images/gem-01.gif", | |
| "images/gem-03.gif", | |
| "images/gem-04.gif", | |
| ], | |
| reviews: [{ | |
| stars: 3, | |
| body: "I think this gem was just OK, could honestly use more shine, IMO.", | |
| author: "[email protected]", | |
| createdOn: 1397490980837 | |
| }, { | |
| stars: 4, | |
| body: "Any gem with 12 faces is for me!", | |
| author: "[email protected]", | |
| createdOn: 1397490980837 | |
| }] | |
| }, | |
| { | |
| name: 'Zircon', | |
| description: "Zircon is our most coveted and sought after gem. You will pay much to be the proud owner of this gorgeous and high shine gem.", | |
| shine: 70, | |
| price: 1100, | |
| rarity: 2, | |
| color: '#000', | |
| faces: 6, | |
| images: [ | |
| "images/gem-06.gif", | |
| "images/gem-07.gif", | |
| "images/gem-09.gif" | |
| ], | |
| reviews: [{ | |
| stars: 1, | |
| body: "This gem is WAY too expensive for its rarity value.", | |
| author: "[email protected]", | |
| createdOn: 1397490980837 | |
| }, { | |
| stars: 1, | |
| body: "BBW: High Shine != High Quality.", | |
| author: "[email protected]", | |
| createdOn: 1397490980837 | |
| }, { | |
| stars: 1, | |
| body: "Don't waste your rubles!", | |
| author: "[email protected]", | |
| createdOn: 1397490980837 | |
| }] | |
| } | |
| ]; | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment