Simple Tab Controls in AngularJS

by mavdhana

HTML

<div ng-app="TabsApp">
    <div id="tabs" ng-controller="TabsCtrl">
        <ul>
            <li ng-repeat="tab in tabs" 
                ng-class="{active:isActiveTab(tab.url)}" 
                ng-click="onClickTab(tab)">{{tab.title}}</li>
        </ul>
        <div id="mainView">
            <div ng-include="currentTab"></div>
        </div>
    </div>
    <script type="text/ng-template" id="one.tpl.html">
		<div id="viewOne">
			<p>Tab One</p>
		</div>
	</script>
	
	<script type="text/ng-template" id="two.tpl.html">
		<div id="viewTwo">
			<p>Tab Two</p>
		</div>
	</script>
	
	<script type="text/ng-template" id="three.tpl.html">
		<div id="viewThree" ng-show="!testing">
			<p>Tab Three</p>
      <button type="button" class="btn btn-default" ng-click="test()">Test</button>
		</div>
    
    <div id="viewTesting" ng-show="testing">
			<p>Tab Three-Testing</p>
     <p>Testing content</p>
		</div>
    
	</script>
  	<script type="text/ng-template" id="testing.tpl.html">
		<div id="viewTesting">
			<p>Tab Three-Testing</p>
     <p>Testing content</p>
		</div>
	</script>
</div>

CSS

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
li {
    float: left;
    border: 1px solid #000;
    border-bottom-width: 0;
    margin: 3px 3px 0px 3px;
    padding: 5px 5px 0px 5px;
    background-color: #CCC;
    color: #696969;
}
#mainView {
    border: 1px solid black;
	clear: both;
	padding: 0 1em;
}
.active {
    background-color: #FFF;
    color: #000;
}

JavaScript

angular.module('TabsApp', [])
.controller('TabsCtrl', ['$scope', '$location', function ($scope, $location) {
    $scope.tabs = [{
            title: 'One',
            url: 'one.tpl.html'
        }, {
            title: 'Two',
            url: 'two.tpl.html'
        }, {
            title: 'Three',
            url: 'three.tpl.html'
       }, {
            title: 'Testing',
            url: 'testing.tpl.html'
        }];

    $scope.currentTab = 'one.tpl.html';

    $scope.onClickTab = function (tab) {
        $scope.currentTab = tab.url;
    }
    
    $scope.isActiveTab = function(tabUrl) {
        return tabUrl == $scope.currentTab;
    }
    
     $scope.testing = false;
    
    $scope.test=function(){
    //alert("test button");
    $scope.testing = true;
    //$location.path('#/testing');
    
    }
}]);