AngularJS ng-show, ng-hide Directives with Example

  Total Views : 918
  Comments : 0
 
  Keywords : What is ng-show, ng-hide directives in angularjs, Show / Hide Div using ngshow / nghide directives in angularjs example, How to use ngshow / nghide in angularjs applications 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

The “ng-show” and “ng-hide” directive in angularjs takes control of displaying HTML element on the browser. They will be shown and hidden elements on the browser depending on the value of their corresponding data model values.

Syntax of AngularJS ng-show, ng-hide Directives

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.

Example of ng-show / ng-hide Directives in AngularJS

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 ngshow / nghide 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.

 Comments (0)

Be the first to give your valuable feedback

Leave a comment

  • Default Tutlane User