AngularJS ng-Show ng-Hide Directive

The AngularJS ng-show & ng-hide directive is used show or hide the DOM element based its expression.

The element is display or hide by removing or adding the ng-hide CSS predefined class onto the element.

Syntax

<div ng-show="value"></div>
<div ng-hide="value"></div>

AngularJS ng-Show ng-Hide Directive Example

<html>
<head>
<title>My first AngularJS ng-hide and ng-show Directive code</title>
<Script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</Script>
<Script>
function appController($scope) {
$scope.checked = true;
}
</Script>
</head>
<body>
<div ng-app ng-controller="appController">

Click To Show/Hide: <input type="checkbox" ng-model="checked"><br/>
<div>
  Show:
  <div ng-show="checked">
    <span></span> This will show up when checkbox is checked.
  </div>
</div>
<div>
  Hide:
  <div ng-hide="checked">
    <span></span> This will hide when checkbox is checked.
  </div>
</div>

</div>

</body>
</html>

See Live Example

« Previous

AngularJS Code Examples

AngularJS Live Demo

ASP.NET Code Examples

Javascript Code Examples

Interview Q & A

Google MAP API Live Demo

Google MAP API Code Examples

Utility Tools

Articles

Angularjs Tutorials

Angularjs References

Angularjs Examples

AngularJS ng-Show ng-Hide Directive

AngularJS ng-Show ng-Hide Directive Example

Recent Articles