AngularJS Tutorial - Tab control with ng-hide, ng-show and ng-click

The following code shows how to create tab control with ng-hide, ng-show and ng-click.

Example


<!doctype html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<style type='text/css'>
.cb {<!--from  w ww  .  j  ava2 s. c o m-->
    list-style: none;
    padding: 10px;
    display:inline-block;
    background-color: #000;
    color: #FFF;
    border: 1px solid black;
  border-radius: 5px;
}
.cb:hover{
  background-color: #4a4a4a;
  color: #FFF;
}
</style>
</head>
<body>
  <div  ng-app>
        <div class="cb" ng-click="showDetails = ! showDetails">tab 1</div>
        <div class="cb" ng-click="showDetails = ! showDetails">tab 2</div>
        <div ng-hide="showDetails">
            <p>first</p>
        </div>
        <div ng-show="showDetails">
            <p>second</p>
        </div>
</div>
</body>
</html>

The code above is rendered as follows: