Tuesday, August 30, 2016

Tabs Into AngularJS

Tabs into Angular

    Into this we are going to learn about tabs into Angular

       So now we have a product and i want to display its Description and its Comments and its reviews so we can do that by using tab
   
    Fortunately twitter bootstrap provides some classes for that but what we need to know is how they behave.
   
    So I have three things description,comments and its Reviews and i want to display that into tab so what we can do for that....Lets do that
   
    so what i want to do is when i click description its description will show and when i click comments at that time admin can see the comments of users and when i click review then user can read reviews of another customer.
   
    for that into HTML
   
    <section>
        <ul class="nav nav-pills">
            <li><a href ng-click="tab = 1">Description</a></li>
            <li><a href ng-click="tab = 2">Comment</a></li>
            <li><a href ng-click="tab = 3">Reveiws</a></li>
        </ul>
        {{tab}}
    </section>
   
    so in above code we assign the values to the tab and when we click on Description it will display 1 and according to the following.
   
    so now what i want every time i click then value or content will get ovewritten so when ng-click changes the values of the tab the {{tab}} expression automatically gets updated.
   
    For that Into HTML include
   
    <div class="panel" ng-show="tab === 1">
        <h3>Description</h3>
        <p>{{product.description}}</p>
    </div>
    <div class="panel" ng-show="tab === 2">
        <h3>Comment</h3>
        <p>{{product.Comment}}</p>
    </div>
    <div class="panel" ng-show="tab === 3">
        <h3>Reveiws</h3>
        <p>{{product.Reveiws}}</p>
    </div>
   
    so in above when we refresh the page no other panel is selected because we didnt set Intial values for tab.
   
    so for that into HTML Include
    <section ng-init="tab = 1">
        <ul class="nav nav-pills">
            <li><a href ng-click="tab = 1">Description</a></li>
            <li><a href ng-click="tab = 2">Comment</a></li>
            <li><a href ng-click="tab = 3">Reviews</a></li>
        </ul>
        {{tab}}
    </section>
   
    so above code will show description by default when page refereshes.
   
    So isn't it great that it will highlighted the tab which is selected we can do that easily by using twitter bootstrap
   
    So now instead of wrinting content on html file should we write that into some component.Any guesses which Componenet ? yes,you are right i am talking about Controller.so now we can create another controller which is tabController.
   
    Into HTML
        <section ng-controller="tabController as property">
        <ul class="nav nav-pills">
            <li class="{active:property.isSeleted(1)}">
                <a href ng-click="property.selectTab(1)">Description</a>
            </li>
            <li class="{active:property.isSeleted(2)}">
                <a href ng-click="property.selectTab(2)">"Comment</a>
            </li>
            <li class="{active:property.isSeleted(3)}">
                <a href ng-click="property.selectTab(3)">Reveiws</a>
            </li>
        </ul>
        <div ng-show="property.isSeleted(1)">
            <h3>Description</h3>
            <p>product.description</p>
        </div>
    </section>
   
    Into app.js
        app.controller("tabController",function(){
            this.tab=1;
           
            this.selectTab=function(settab){
                this.tab=settab;
            };
            this.isSeleted = function(checkTab){
                return this.tab === checkTab;
            };
        })

Exercise :

    1)  Create a controller named TabController.
    2) Intialize tab property into tabController.
    3) In order to set the current tab, we'll need a setTab method to use in our HTML. It should set the tab property of TabController to a value passed in.
    4) We've got a setTab method. Now we need an isSet method that accepts a value and returns whether that value matches this.tab.
    5) Attach the TabController to the <section> element with the .tab class. Don't forget to also add an alias.
    6) Trigger the selectTab method when a link inside a tab is clicked. Add this to each of the tab links. Pass in the number of the tab, in this case 1, 2 or 3.

Feel free to comment below your experience with above approach and If you still find any problem  with above steps Let me know I would love to help you to resolve your  problem.

 If you want to take your Technological Knowledge to the Next Level and For More Technological information Stay tuned to  Visionfortech


Related Posts :


1)  Where we can use AngularJS and Difference Between angularjs and Jquery
2)  (Level 1.1) Directives,Modules into AngularJS
3)  (Level 1.2) Controller Into AngularJS
4)  (Level 1.3) In built Directives of AngularJS
5)  (Level 2.1) AngulerJs Filters and How to Create Custom Filters into AngularJs
6)  (Level 2.2) Tabs into Angular

3 comments:

  1. Really a good technical site,keep on writing good stuffs
    dot net training in chennai

    ReplyDelete
    Replies
    1. Thanks for your valuable feedback.
      Really appreciating..!!

      Delete
  2. Good Information shared with people who are looking for this, Thanks for providing Angularjs Online course

    ReplyDelete

Protected by Copyscape