AngularJS ng-show, ng-hide Directives with Example

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.

AngularJS ng-show and ng-hide Directives

In angularjs, ng-show and ng-hide directives are used to take a control of displaying HTML elements in our applications. By using ng-show or ng-hide, we can show or hide html elements depending on the value of their data model values.

AngularJS ng-show / hide Directives Syntax

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.

AngularJS ng-show / ng-hide Directives 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 button click

 

Live Preview

<!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.

Output of AngualrJS ng-show / ng-hide Directives

Following is the result of using ng-show and ng-hide directives in angularjs application.

 

Angularjs ng-show, ng-hide directives example output or resultThis is how we can use ng-show and ng-hide directives in angularjs application.