Tab Control using AngularJS & CSS and display dynamic pages in ng-include directive when user clicks on tab.

Introduction:
This article explain you to design the tab menu using CSS and AngularJS
Description:
In the Previous post i explained about ng-include directive. Below  code is used to design the dynamic tabs menu using CSS and AngularJS ,and display the pages in ng-include directive when user clicks on tab menu.

To implement this we need to write the code like as shown below

Java Script:

 <script src="../scripts-angular/angular.js"></script>
    <script type="text/javascript">
        var myApp = angular.module("myApp", []);
        myApp.controller('tabsctrl', ['$scope', function ($scope) {
            $scope.tabs = [
                { title: 'Home', url: 'Home.html', },
                { title: 'About', url: 'About.html', },
                { title: 'Contact', url: 'Contact.html', }

            ];

            $scope.currentTab = 'Home.html'
            $scope.onClickTab = function (tab) {
                $scope.currentTab = tab.url;
            }

            $scope.isActiveTab = function (tabUrl) {
                return tabUrl == $scope.currentTab;
            }
        }]);

    </script>

CSS

 <style type="text/css">
        /* Tab Content - menucool.com */

        ul.tabs {
            padding: 7px;
            font-size: 0;
            margin: 0;
            list-style-type: none;
            text-align: left; /*set to left, center, or right to align the tabs as desired*/
        }

            ul.tabs li {
                display: inline;
                margin: 0;
                margin-right: 3px; /*distance between tabs*/
            }

                ul.tabs li a {
                    text-decoration: none;
                    position: relative;
                    padding: 8px 16px 8px 16px;
                    border: 1px solid #c2d6e6;
                    border-bottom-color: #c2d6e6;
                    outline: none;
                    color: #4D5569;
                    font-size: 14px;
                    font-weight: bold;
                    text-align: center;
                    /*background-image:url(images/textbg.gif);*/
                    background-repeat: repeat-x;
                    background-position: center top;
                    -moz-border-radius-topleft: 0px;
                    -moz-border-radius-topright: 0px;
                    -moz-border-radius-bottomright: 0px;
                    -moz-border-radius-bottomleft: 0px;
                    -webkit-border-radius: 3px 3px 0px 0px;
                    border-radius: 3px 3px 0px 0px;
                    cursor: pointer;
                }

                    ul.tabs li a:visited {
                        color: #000;
                    }

                    ul.tabs li a:hover {
                        color: #298CAD;
                        border: 1px solid #c2d6e6;
                    }

                ul.tabs li.selected a {
                    position: relative;
                    top: 0px;
                    font-weight: bold;
                    background: white;
                    border: 1px solid #c2d6e6;
                    border-bottom: 1px solid #fff;
                    color: #2A6598;
                }



                    ul.tabs li.selected a:hover {
                        text-decoration: none;
                        color: #298CAD;
                    }


        div.tabcontents {
            border: 1px solid #c2d6e6;
            padding: 7px;
            background-color: #FFF;
            border-radius: 3px 3px 3px 3px;
            margin-top: 1px;
        }

        .active {
            background-color: #FFF;
            color: #000;
        }
    </style>

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Tabs uisng AngularJS and Ng-include</title>

    <script src="../scripts-angular/angular.js"></script>
   
</head>
<body>
    <form id="frmTabs">
        <div ng-app="myApp">
            <div class="row margin_5">
                <div class="col-lg-12 col-sm-12 col-md-12">
                    <div ng-controller="tabsctrl">
                        <div id="tabs">
                            <ul class="tabs">
                                <li ng-repeat="tab in tabs" ng-class="{selected:isActiveTab(tab.url)}"><a ng-click="onClickTab(tab)">{{tab.title}}</a> </li>
                            </ul>
                        </div>
                        <div id="mainView" class="tabcontents">
                            <div ng-include="currentTab"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="border: 1px solid #000;margin-top:10px;">

            <div style="text-align: center;"><b>www.logicspark.in</b></div>

        </div>
    </form>
</body>
</html>

DEMO

Tabs
Add caption

Blogger Tips and TricksLatest Tips And TricksBlogger Tricks