Angularjs Examples

AJS Examples

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.


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

AngularJS ng-Show ng-Hide Directive Example

<title>My first AngularJS ng-hide and ng-show Directive code</title>
<Script SRC="">
function appController($scope) {
$scope.checked = true;
<div ng-app ng-controller="appController">

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


See Live Example