AngularJS ng-show Directive Last Updated : 03 Aug, 2022 Comments Improve Suggest changes Like Article Like Report The ng-show Directive in AngluarJS is used to show or hide the specified HTML element. If the given expression in the ng-show attribute is true then the HTML element will display otherwise it hides the HTML element. It is supported by all HTML elements. Syntax: <element ng-show="expression"> Contents... </element> Parameter Value: expression: It specifies the element will be displayed only if the required expression returns true.Example 1: This example uses the ng-show Directive to display the HTML element after checking the checkbox. HTML <!DOCTYPE html> <html> <head> <title>ng-show Directive</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> </head> <body> <div ng-app="app" ng-controller="geek"> <h1 style="color:green">GeeksforGeeks</h1> <h2>ng-show Directive</h2> <input id="chshow" type="checkbox" ng-model="show" /> <label for="chshow"> Show Paragraph </label> <p ng-show="show" style="background: green; color: white; font-size: 14px; width:35%; padding: 10px;"> Show this paragraph using ng-show </p> </div> <script> var myapp = angular.module("app", []); myapp.controller("geek", function($scope) { $scope.show = false; }); </script> </body> </html> Output: Example 2: This example uses the ng-show Directive to display entered number a is a multiple of 5 or not. HTML <!DOCTYPE html> <html> <head> <title>ng-show Directive</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> </head> <body ng-app="app" style="text-align:center"> <div ng-controller="geek" ng-init="val=0"> <h1 style="color:green"> GeeksforGeeks </h1> <h3>ng-show Directive</h3> Enter a number: <input type="text" ng-model="val" ng-keyup="check(val)"> <div ng-hide="show"> <h3> The number is multiple of 5 </h3> </div> <div ng-show="show"> <h3> The number is not a multiple of 5 </h3> </div> </div> <script> var app = angular.module("app", []); app.controller('geek', ['$scope', function($scope) { $scope.check = function(val) { $scope.show = val % 5 == 0 ? false : true; }; }]); </script> </body> </html> Output: Comment More infoAdvertise with us Next Article AngularJS ng-show Directive V Vishal Chaudhary 2 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Directives Similar Reads AngularJS ng-src Directive The ng-src Directive in AngularJS is used to specify the src attribute of an <img> element, ie., it overrides the original src attribute for an <img> element. This attribute must be used if we have the Angular code inside of the src element. It ensures that the wrong image is not produce 2 min read AngularJS ng-open Directive The ng-open Directive in AngularJS is used to specify the open attribute of the specified HTML element. If the expression inside the ng-open directive returns true then the details will be shown otherwise they will be hidden. Syntax: <element ng-open="expression"> Contents... <element> P 1 min read AngularJS ng-switch Directive The ng-switch Directive in AngularJS is used to specify the condition to show/hide the child elements in HTML DOM. The HTML element will be displayed only if the expression inside the ng-switch directive returns true otherwise it will be hidden. It is supported by all HTML elements. Syntax: <elem 2 min read AngularJS ng-if Directive The ng-if Directive in AngularJS is used to remove or recreate a portion of the HTML element based on an expression. The ng-if is different from the ng-hide directive because it completely removes the element in the DOM rather than just hiding the display of the element. If the expression inside it 2 min read AngularJS ng-options Directive The ng-options Directive in AngularJS is used to build and bind HTML elements with options to a model property. It is used to specify <options> in a <select> list. It is designed specifically to populate the items on a dropdown list. This directive implements an array, in order to fill t 2 min read AngularJS ng-value Directive The ng-value Directive in AngularJS is used to specify the value of an input element. This directive can be used to achieve the one-way binding for the given expression to an input element, especially when the ng-model directive is not used for that specific element. It is supported by <input> 2 min read AngularJS ng-app Directive The ng-app Directive in AngularJS is used to define the root element of an AngularJS application. This directive automatically initializes the AngularJS application on page load. It can be used to load various modules in AngularJS applications. The ng-app directive declares only once in the HTML doc 1 min read AngularJS Directive AngularJS is a Javascript open-source front-end framework that is mainly used to develop single-page web applications(SPAs). It has the ability to change static HTML to dynamic HTML. Its features like dynamic binding and dependency injection eliminate the need for code that we have to write otherwis 4 min read AngularJS | ng-selected Directive The ng-selected Directive in AngularJS is used to specify the selected attribute of an HTML element. It can be used to select the default value specified on an HTML element. If the expression inside the ng-selected directive returns true then the selected option value will be displayed otherwise not 1 min read AngularJS ng-readonly Directive The ng-readonly Directive in AngularJS is used to specify the readonly attribute of an HTML element. The HTML element will be readonly only if the expression inside the ng-readonly directive returns true. The ng-readonly directive is required to change the value between true and false. In case, if t 2 min read Like