AngularJs Tutorials
![say]()
Important News
ng-show and hide directives in AngularJS
The ng-show and hide directives are used to show or hide the HTML elements according to the condition.
File name : index.php
<!doctype html>
<html ng-app=''>
<head>
<title>ng-show and hide directives in AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js" type='text/javascript'></script>
</head>
<body >
<h3>ng-show directive</h3>
<span ng-show="true">ng-show with true expression</span><br/>
<span ng-show="false">ng-show with false expression</span><br/>
<h3>ng-hide directive</h3>
<span ng-hide="true">ng-hide with true expression</span><br/>
<span ng-hide="false">ng-hide with false expression</span> <br/>
</body>
</html>
Creating Tab Structure
File name : index.php
<!doctype html>
<html ng-app=''>
<head>
<title>ng-show and hide directives in AngularJS</title>
<link href="style.css" rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body >
<div class="tabs-container" ng-init="tab = 1">
<!-- Tab header -->
<ul class="tabs-header">
<li ng-click="tab = 1">AngularJS</li>
<li ng-click="tab = 2">Controller</li>
<li ng-click="tab = 3">ng-include</li>
</ul>
<!-- Tab content -->
<!-- Tab 1 -->
<div ng-show="tab == 1" class="tab" >
<h3>What is AngularJS?</h3>
<p>AngularJS is a JavaScript MVC framework developed by Google that lets you build well structured, easily testable, declarative and maintainable front-end applications which provides solutions to standard infrastructure concerns.</p>
<a href="https://makitweb.com/what-is-angularjs/" target="_blank">More..</a>
</div>
<!-- Tab 2 -->
<div ng-show="tab == 2" class="tab">
<h3>Modules and Controllers in AngularJS</h3>
<p>Controllers is a JavaScript constructor functions which are bound to a particular scope.</p>
<p>For defining controller in the Angular, we use angular.controller method which allows us to bind controller to the module. It takes controller name and a function.</p>
<a href="https://makitweb.com/modules-and-controllers-in-angularjs/" target="_blank">More...</a>
</div
<!-- Tab 3 -->
<div ng-show="tab == 3" class="tab">
<h3>ng include directives in AngularJS</h3>
<p>AngularJS allow us to embed HTML page within another HTML page using ng-include directive.</p>
<a href="https://makitweb.com/ng-include-directives-angularjs/" target="_blank">More...</a>
</div
</div>
</body>
</html>
css
.tabs-container{
border: 0px solid black;
width: 50%;
height: 400px;
margin: 0 auto;
padding: 5px;
}
/* tab header */
.tabs-header{
list-style: none;
margin: 0;
padding: 0;
}
.tabs-header li{
float: left;
padding: 10px 15px;
text-align: center;
margin-right: 1px;
background: cornflowerblue;
border: 5px 0px;
color: white;
}
.tabs-header li:hover{
cursor: pointer;
}
/* tab content */
.tab{
display: inline-block;
width: 99%;
height: 300px;
clear: both;
border: 1px solid black;
margin-top: 5px !important;
padding:5px;
}
.tab p{
line-height: 25px;
letter-spacing: 1px;
font-size:17px;
text-align: justify;
}
.tab a{
text-decoration: none;
color: blue;
}
File name : index.php
File name : index.php