Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to show tab panel in AngularJS

    • 0
    • 1
    • 1
    • 1
    • 0
    • 0
    • 0
    • 0
    • 1.25k
    Comment on it

    Hello All,

    Working with AngularJS, which helps us to create and work with one page application, and in one page application we want to show all the Data in only one page, In such situation we must show the data in well organized manner and to do that, we can create tab controls.

    AngularJS has provided some of the in built functions for showing tab panels in UI. And to do that we have the following code packet:

    <section ng-init="tab = 1">
        <ul class="nav nav-pills">
            <li>
                <a href="#" ng-click="tab = 1">Dashboard</a>
            </li>
            <li>
                <a href="#" ng-click="tab = 2">About</a>
            </li>
            <li>
                <a href="#" ng-click="tab = 3">Product</a>
            </li>
        </ul>
        <div class="container mainContentDiv" ng-show="tab === 1">
            <div class="page-header headerDiv">
                <h3>Dashboard {{tab}}</h3>
            </div>
        </div>
        <div class="container mainContentDiv" ng-show="tab === 2">
            <div class="page-header headerDiv">
                <h3>About {{tab}}</h3>
            </div>
        </div>
        <div class="container mainContentDiv" ng-show="tab === 3">
            <div class="page-header headerDiv">
                <h3>Product {{tab}}</h3>
            </div>
        </div>        
    </section>
    

    Here we have added ng-click directive which takes and expression to evaluate where we are providing tab = 1, tab = 2, tab = 3 and to check the value of the tab expression we can simply print {{tab}} which will show the output on the UI as 1, 2, 3. This also demonstrates the concept of Two way data binding in AngularJS.


    Note : You must add all the required AngularJS files to before start working on this example.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: