Here we will learn what is ng-show, ng-hide directives in angularjs, use of ng-show and ng-hide directives in angularjs and how to use angularjs ng-show and ng-hide directives with example.
In angularjs, ng-show
and ng-hide
directives are used to take control of displaying HTML elements in our applications. By using ng-show
or ng-hide
directives, we can show or hide HTML elements depending on the value of their data model values.
Following is the syntax of using ng-show
and ng-hide
directives in angularjs applications.
<!--Show Div Based on showval-->
<div ng-show="showval">Show Div: I will Appear on Show Click</div><br />
<!--Hide Div Based on showval-->
<div ng-hide="hideval">Hide Div: I will Appear on Hide Click</div>
We will see how to use ng-show
and ng-hide
directives in angularjs application with example.
Following is the example of using ng-show
and ng-hide
directives in angularjs to show or hide div elements based on assigned values on the button click.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
AngularJs ng-show, ng-hide Directive Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module("AngularshowhideApp", []);
app.controller('showhidectrl', function ($scope) {
$scope.showval = true;
$scope.hideval = false;
$scope.isShowHide = function (param) {
if (param == "show") {
$scope.showval = true;
$scope.hideval = true;
}
else if (param == "hide") {
$scope.showval = false;
$scope.hideval = false;
}
else {
$scope.showval = true;
$scope.hideval = false;
}
}
});
</script>
</head>
<body ng-app="AngularshowhideApp">
<div ng-controller="showhidectrl">
Enter Name to Display :
<input type="button" ng-click="isShowHide('show')" value="Show Div"> <input type="button" ng-click="isShowHide('hide')" value="Hide Div">
<br />
<!--Show Div Based on showval-->
<div ng-show="showval">Show Div: I will Appear on Show Click</div><br />
<!--Hide Div Based on showval-->
<div ng-hide="hideval">Hide Div: I will Appear on Hide Click</div>
</div>
</body>
</html>
When you check above example we will show or hide div elements using ng-show
and ng-hide
directives in angularjs based on showval and hideval values.
Following is the result of using ng-show
and ng-hide
directives in angularjs application.
This is how we can use ng-show and ng-hide directives in angularjs application.