{"id":2346,"date":"2016-09-01T07:48:12","date_gmt":"2016-09-01T07:48:12","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=2346"},"modified":"2023-09-24T13:42:21","modified_gmt":"2023-09-24T13:42:21","slug":"learn-using-ng-show-in-angularjs-with-4-demos","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/learn-using-ng-show-in-angularjs-with-4-demos\/","title":{"rendered":"Learn using ng-show in AngularJS with 4 demos"},"content":{"rendered":"<h3><strong>The ng-show directive<\/strong><\/h3>\n<p>In AngularJS, the ng-show directive is used to show or hide the specified elements.<\/p>\n<p>For example, upon clicking a checkbox, you may display or hide a subscription form from the web page.<\/p>\n<p>Similarly, you may use it with a div, paragraph, span for showing or hiding upon clicking a button or with other form control.<\/p>\n<p>&nbsp;<\/p>\n<h3><strong>Syntax of using ng-show directive<\/strong><\/h3>\n<p>The ng-show directive can be used as follows:<\/p>\n<blockquote><p>&lt;button<\/p>\n<p>ng-show=&#8221;expression&#8221;&gt;<\/p>\n<p>&#8230;<\/p>\n<p>&lt;\/button&gt;<\/p><\/blockquote>\n<p>Where the button can be replaced by any other element that you want to associate ng-show.<\/p>\n<p><strong>A few main points about ng-show directive:<\/strong><\/p>\n<ul>\n<li>An expression is provided to the ng-show attribute.<\/li>\n<li>If the given expression is evaluated as <strong><em>true<\/em><\/strong>, the element will display.<\/li>\n<li>If the expression is false, the element will hide.<\/li>\n<li>As the expression is false, the<em><strong> .ng-hide<\/strong><\/em> class applies to the specified element. The class sets the display with none value using <em>!important flag (this is a built-in class of AngularJS)<\/em>. This makes the element hidden.<\/li>\n<li>When the\u00a0expression is true, the ng-hide class is removed from the element.<\/li>\n<\/ul>\n<h3><strong>A demo of using ng-show with a button<\/strong><\/h3>\n<p>In this demo, a button is created with Bootstrap class. The ng-click directive executes as you click the button and it will pass the Boolean expression to the controller. The div will display if it was hidden and vice versa:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-2347\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/3.0_1-angularjs-ng-show.jpg\" alt=\"angularjs ng-show\" width=\"607\" height=\"150\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/3.0_1-angularjs-ng-show.jpg 607w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/3.0_1-angularjs-ng-show-300x74.jpg 300w\" sizes=\"(max-width: 607px) 100vw, 607px\" \/><\/p>\n<h6><strong>See online demo and code<\/strong><\/h6>\n<p>The code:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;div class=\"container\" ng-app=\"showdemo\" ng-controller=\"ShowController\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;h3&gt;A demo of ng-show&lt;\/h3&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;div class=\"row\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"col-md-3\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;button ng-click=\"shdiv = !shdiv\" class=\"btn btn-success btn-lg\"&gt;Show\/Hide div&lt;\/button&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"col-md-3 divclass\" ng-show=\"shdiv\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 This div element will show \/ hide as you click the button!\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;script&gt;\r\n\r\nvar showdemo = angular.module('showdemo', [])\r\n\r\n\u00a0\r\n\r\n.controller('ShowController', function($scope) {\r\n\r\n\u00a0\r\n\r\n\u00a0 $scope.shdiv = false;\r\n\r\n\u00a0\r\n\r\n});\r\n\r\n&lt;\/script&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>A little custom CSS is also used for the div element:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.divclass {\r\n\r\n\u00a0 background: #3B505E;\r\n\r\n\u00a0 height: auto;\r\n\r\n\u00a0 width:250px;\r\n\r\n\u00a0 border-radius: 12px;\r\n\r\n\u00a0 padding:10px;\r\n\r\n\u00a0 font-size:15px;\r\n\r\n\u00a0 color:#ffffff;\u00a0\r\n\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<p>That\u2019s it!<\/p>\n<h3><strong>An example with checkbox<\/strong><\/h3>\n<p>The following demo shows using a checkbox for demonstrating ng-show directive. As you click the checkbox, it will display the hidden div. If that div is visible, clicking it again will hide it. No controller is used in this example:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-2348\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/3.0_2-angularjs-ng-show-checkbox.jpg\" alt=\"angularjs ng-show checkbox\" width=\"547\" height=\"124\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/3.0_2-angularjs-ng-show-checkbox.jpg 547w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/3.0_2-angularjs-ng-show-checkbox-300x68.jpg 300w\" sizes=\"(max-width: 547px) 100vw, 547px\" \/><\/p>\n<h6><strong>See online demo and code<\/strong><\/h6>\n<p><strong>The code of example:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;div class=\"container\" ng-app=\"\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;h3&gt;A demo of ng-show&lt;\/h3&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;div class=\"row\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"col-md-3\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Show \/ Hide div \u00a0\u00a0&lt;input type=\"checkbox\" class=\"checkbox\" ng-model=\"shdiv\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"col-md-3 divclass\" ng-show=\"shdiv\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Uncheck the checkbox to hide this div!\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\r\n\r\n&lt;\/div&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>Get the complete code from the demo page.<\/p>\n<h3><strong>A demo of using expression to show entered color paragraph<\/strong><\/h3>\n<p>In this demo, the ng-show is used with a\u00a0paragraph where the entered color\u2019s paragraph will display. As you enter a color name from the red, green, blue and yellow options in the textbox the entered value is evaluated and the respective paragraph with its specified class will display.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-2349\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/3.0_3-angularjs-ng-show-paragraph.jpg\" alt=\"angularjs ng-show paragraph\" width=\"278\" height=\"139\" \/><\/p>\n<h6><strong>See online demo and code<\/strong><\/h6>\n<p><strong>The markup:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;body ng-app=\"showcolorP\"&gt;\r\n\r\n&lt;div class=\"container\"\u00a0 ng-controller=\"colorController\"&gt;\r\n\r\n\u00a0\r\n\r\n\u00a0\u00a0\u00a0 &lt;div class=\"page-header text-center\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;h1&gt;A demo of ng-show with paragraphs&lt;\/h1&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;div class=\"row\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"col-md-4\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;form&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"form-group\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;label&gt;Enter either of a color name:&lt;\/label&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;input type=\"text\" class=\"form-control\" ng-model=\"color\" placeholder=\"red, green, blue, yellow\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/form&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"col-md-4\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;p class=\"pred\" ng-show=\"color == 'red'\"&gt;The Red is true&lt;\/p&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;p class=\"pgreen\" ng-show=\"color == 'green'\"&gt;The Green is true&lt;\/p&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;p class=\"pblue\" ng-show=\"color == 'blue'\"&gt;The Blue is true&lt;\/p&gt;\r\n\r\n\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0&lt;p class=\"pyellow\" ng-show=\"color == 'yellow'\"&gt;The Yellow is true&lt;\/p&gt;\r\n\r\n\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;script&gt;\r\n\r\nvar showcolorP = angular.module('showcolorP', [])\r\n\r\n\u00a0\r\n\r\n.controller('colorController', function($scope) {\r\n\r\n\u00a0\r\n\r\n});\r\n\r\n&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>The following CSS is used for paragraphs:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.pred {\r\n\r\n\u00a0 background: red;\r\n\r\n\u00a0 height: auto;\r\n\r\n\u00a0 width:150px;\r\n\r\n\u00a0\u00a0padding:5px;\r\n\r\n\u00a0 font-size:16px;\r\n\r\n\u00a0 color:#eee;\u00a0\r\n\r\n}\r\n\r\n.pgreen {\r\n\r\n\u00a0 background: #008000;\r\n\r\n\u00a0 height: auto;\r\n\r\n\u00a0 width:150px;\r\n\r\n\u00a0 padding:5px;\r\n\r\n\u00a0 font-size:16px;\r\n\r\n\u00a0 color:#eee;\u00a0\r\n\r\n}\r\n\r\n.pblue {\r\n\r\n\u00a0 background: #0000A0;\r\n\r\n\u00a0 height: auto;\r\n\r\n\u00a0 width:150px;\r\n\r\n\u00a0 padding:5px;\r\n\r\n\u00a0 font-size:16px;\r\n\r\n\u00a0 color:#eee;\u00a0\r\n\r\n}\r\n\r\n.pyellow {\r\n\r\n\u00a0 background: #FFFF00;\r\n\r\n\u00a0 height: auto;\r\n\r\n\u00a0 width:150px;\r\n\r\n\u00a0 padding:5px;\r\n\r\n\u00a0 font-size:16px;\r\n\r\n\u00a0 color:#000;\u00a0\r\n\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<h3><strong>Same example with HTML select<\/strong><\/h3>\n<p>In this demo, rather than using a textbox field, I have used an HTML select dropdown. Select any color from the dropdown and the respective color paragraph will display. In the &lt;select&gt; tag, the <em>ng-model<\/em> directive is used. This is followed by creating four paragraphs that are hidden initially. Each &lt;p&gt; tag is assigned an expression by using ng-show directive with its respective color name. The matched one will show, have a look:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-2350\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/3.0_4-angularjs-ng-show-select.jpg\" alt=\"angularjs ng-show select\" width=\"298\" height=\"134\" \/><\/p>\n<h6><strong>See online demo and code<\/strong><\/h6>\n<p><strong>The markup:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;body ng-app=\"showcolorP\"&gt;\r\n\r\n&lt;div class=\"container\"\u00a0 ng-controller=\"colorController\"&gt;\r\n\r\n\u00a0\r\n\r\n\u00a0\u00a0\u00a0 &lt;div class=\"page-header text-center\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;h1&gt;A demo of ng-show with paragraphs&lt;\/h1&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;div class=\"row\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"col-md-4\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;form&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"form-group\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;label&gt;Select a color:&lt;\/label&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;select class=\"form-control\" ng-model=\"color\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;option&gt;red&lt;\/option&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;option&gt;green&lt;\/option&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;option&gt;blue&lt;\/option&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;option&gt;green&lt;\/option&gt;\r\n\r\n\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/select&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/form&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"col-md-4\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;p class=\"pred\" ng-show=\"color == 'red'\"&gt;The Red is true&lt;\/p&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;p class=\"pgreen\" ng-show=\"color == 'green'\"&gt;The Green is true&lt;\/p&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;p class=\"pblue\" ng-show=\"color == 'blue'\"&gt;The Blue is true&lt;\/p&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;p class=\"pyellow\" ng-show=\"color == 'yellow'\"&gt;The Yellow is true&lt;\/p&gt;\r\n\r\n\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;script&gt;\r\n\r\nvar showcolorP = angular.module('showcolorP', [])\r\n\r\n\u00a0\r\n\r\n.controller('colorController', function($scope) {\r\n\r\n\u00a0\r\n\r\n});\r\n\r\n&lt;\/script&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>Get the complete code from the demo page.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The ng-show directive In AngularJS, the ng-show directive is used to show or hide the specified elements. For example, upon clicking a checkbox, you may display or hide a subscription form from the web page. Similarly, you may use it with a div, paragraph, span for showing or hiding upon clicking a button or with &#8230; <a title=\"Learn using ng-show in AngularJS with 4 demos\" class=\"read-more\" href=\"https:\/\/www.jquery-az.com\/learn-using-ng-show-in-angularjs-with-4-demos\/\" aria-label=\"More on Learn using ng-show in AngularJS with 4 demos\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":2347,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[18],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Learn using ng-show in AngularJS with 4 demos<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.jquery-az.com\/learn-using-ng-show-in-angularjs-with-4-demos\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Learn using ng-show in AngularJS with 4 demos\" \/>\n<meta property=\"og:description\" content=\"The ng-show directive In AngularJS, the ng-show directive is used to show or hide the specified elements. For example, upon clicking a checkbox, you may display or hide a subscription form from the web page. Similarly, you may use it with a div, paragraph, span for showing or hiding upon clicking a button or with ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/learn-using-ng-show-in-angularjs-with-4-demos\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-09-01T07:48:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-24T13:42:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/3.0_1-angularjs-ng-show.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"607\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/learn-using-ng-show-in-angularjs-with-4-demos\/\",\"url\":\"https:\/\/www.jquery-az.com\/learn-using-ng-show-in-angularjs-with-4-demos\/\",\"name\":\"Learn using ng-show in AngularJS with 4 demos\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2016-09-01T07:48:12+00:00\",\"dateModified\":\"2023-09-24T13:42:21+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/learn-using-ng-show-in-angularjs-with-4-demos\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/learn-using-ng-show-in-angularjs-with-4-demos\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/learn-using-ng-show-in-angularjs-with-4-demos\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Learn using ng-show in AngularJS with 4 demos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Learn using ng-show in AngularJS with 4 demos","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.jquery-az.com\/learn-using-ng-show-in-angularjs-with-4-demos\/","og_locale":"en_US","og_type":"article","og_title":"Learn using ng-show in AngularJS with 4 demos","og_description":"The ng-show directive In AngularJS, the ng-show directive is used to show or hide the specified elements. For example, upon clicking a checkbox, you may display or hide a subscription form from the web page. Similarly, you may use it with a div, paragraph, span for showing or hiding upon clicking a button or with ... Read more","og_url":"https:\/\/www.jquery-az.com\/learn-using-ng-show-in-angularjs-with-4-demos\/","article_published_time":"2016-09-01T07:48:12+00:00","article_modified_time":"2023-09-24T13:42:21+00:00","og_image":[{"width":607,"height":150,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/3.0_1-angularjs-ng-show.jpg","type":"image\/jpeg"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/learn-using-ng-show-in-angularjs-with-4-demos\/","url":"https:\/\/www.jquery-az.com\/learn-using-ng-show-in-angularjs-with-4-demos\/","name":"Learn using ng-show in AngularJS with 4 demos","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2016-09-01T07:48:12+00:00","dateModified":"2023-09-24T13:42:21+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/learn-using-ng-show-in-angularjs-with-4-demos\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/learn-using-ng-show-in-angularjs-with-4-demos\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/learn-using-ng-show-in-angularjs-with-4-demos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"Learn using ng-show in AngularJS with 4 demos"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2346"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=2346"}],"version-history":[{"count":4,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2346\/revisions"}],"predecessor-version":[{"id":8891,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2346\/revisions\/8891"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/2347"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=2346"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=2346"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=2346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}