[AngularJS]10. Using TabController, ng-controller <blockquote> tag

To connect our controller to our page, we're going to need a few directives. I hope you remember which ones. We've provided all the HTML for you. Try to accomplish the following tasks:

1. Attach the TabController to the <section> element with the .tabclass. Don't forget to also add an alias.

<section class="tab" ng-controller="TabController as tab">

2. Trigger the setTab method correctly when a link inside a tab is clicked. Add this to each of the tabs. Pass in the number of the tab, in this case 1, 2 or 3.

        <ul class="nav nav-pills">
          <li>
            <a href ng-click="tab.setTab(1)">Description</a></li>
          <li >
            <a href ng-click="tab.setTab(2)">Specs</a></li>
          <li >
            <a href ng-click="tab.setTab(3)">Reviews</a></li>
        </ul>

3. Use the isSet method to show the corresponding tab. You'll need to add a directive to each of the div elements in .tab.

        <div ng-show="tab.isSet(1)">
          <h4>Description</h4>
          <blockquote></blockquote>
        </div>
        <div ng-show="tab.isSet(2)">
          <h4>Specs</h4>
          <blockquote>Shine: </blockquote>
        </div>
        <div ng-show="tab.isSet(3)">
          <h4>Reviews</h4>
          <blockquote></blockquote>
        </div>

4. Add the active class to the correct <li> when the each tab is clicked. You'll need to add a directive to each li in .nav.

         <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>

5. Within the description tab, output the product description within the blockquote element.

 <div ng-show="tab.isSet(1)">
          <h4>Description</h4>
          <blockquote>{{product.description}}</blockquote>
        </div>

6. Within the specs tab, output the product shine. We want to see something like: "Shine: 4".

        <div ng-show="tab.isSet(2)">
          <h4>Specs</h4>
          <blockquote>Shine: {{product.shine}}</blockquote>
        </div>

<!DOCTYPE html>
<html ng-app="gemStore">
  <head>
    <base href='http://courseware.codeschool.com/shaping-up-with-angular-js/' />
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="app.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>
      <section ng-show="product.images.length">
        <img ng-src="{{product.images[0]}}" />
        <ul class="list-inline thumbs">
          <li class="thumbnail" ng-repeat="image in product.images">
            <img ng-src="{{image}}" />
          </li>
        </ul>
      </section>

      <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>
          <blockquote></blockquote>
        </div>
      </section>
    </div>
  </body>
</html>

(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;
    };
  });

  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: "joe@example.org",
        createdOn: 1397490980837
      }, {
        stars: 1,
        body: "This gem sucks.",
        author: "tim@example.org",
        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: "JimmyDean@example.org",
        createdOn: 1397490980837
      }, {
        stars: 4,
        body: "Any gem with 12 faces is for me!",
        author: "gemsRock@example.org",
        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: "turtleguyy@example.org",
        createdOn: 1397490980837
      }, {
        stars: 1,
        body: "BBW: High Shine != High Quality.",
        author: "LouisW407@example.org",
        createdOn: 1397490980837
      }, {
        stars: 1,
        body: "Don't waste your rubles!",
        author: "nat@example.org",
        createdOn: 1397490980837
      }]
    }
  ];
})();