Show and Hide in AngularJs Example

Show and Hide in AngularJs Example

AngularJs have directives to show and hide the DOM elements. The directives are

  1. ng-show
  2. ng-hide

Let us demonstrate an small example to understand better about how these directives works.

<html>
<body>
    <div ng-app="">
    <p>ng-show directive</p>
        <p ng-show="true">I am visible.</p>
        <p ng-show="false">I am not visible.</p>
    <p>ng-hide directive</p>
        <p ng-hide="true">I am visible.</p>
        <p ng-hide="false">I am not visible.</p>
    </div>
</body>
<script src="lib/angular.js" type="text/javascript"></script>
</html>

Output:

ng-show directive

   I am visible.

ng-hide directive

   I am not visible.

When the program is run, we see that only paragraph containing text “I am visible.” display while other doesn’t.

These  directives works on value true or false. ‘ng-show‘ will display DOM element if the value passed to it is true and same is case with ‘ng-hide‘, where it hides the DOM element if the value passed to it is true.

Let us demonstrate another example which accept  user input and displays value depending upon it.

<html ng-app="myApp">

<head>
    <title>Table with ng-repeat</title>
    <style>
        td,
        th {
            border: 1px solid black;
        }
    </style>
</head>

<body ng-controller="gridController">
    <!--Enter age limit of type number only-->
    <span>Enter the age limit: <input type="number" number-mask="" required ng-init="ageRange=0" ng-model="ageRange"/><span>

<!--The table will hide if the age limit set by user exceeds 10-->
<table  ng-hide="ageRange>10">
<tr>
<th>FullName</th>
<th>Age</th>
<th>Address</th>
</tr>
<!--Table will display data with age less the user added input-->
<tr ng-repeat="x in details" ng-show="{{x.age}}<=ageRange">
<td >{{x.FullName}}</td>
<td >{{x.age}}</td>
<td >{{x.Address}}</td>
</tr>
</table>
<!--The below paragraph will display when user added age range exceeds 10-->
<p ng-show="ageRange>10">Please enter age within range of 1-10. </p>
</body>
<script src="lib/angular/angular.js" type="text/javascript"></script>
<script>
    var myApp = angular.module("myApp", []).controller("gridController", function ($scope) {
        $scope.details =
                    [{ FullName: "Code2Succeed-1", age: "1", Address: "Address: Code2Succeed-1" },
                     { FullName: "Code2Succeed-2", age: "2", Address: "Address: Code2Succeed-2" },
                     { FullName: "Code2Succeed-3", age: "3", Address: "Address: Code2Succeed-3" },
                     { FullName: "Code2Succeed-4", age: "4", Address: "Address: Code2Succeed-4" },
                     { FullName: "Code2Succeed-5", age: "5", Address: "Address: Code2Succeed-5" },
                     { FullName: "Code2Succeed-6", age: "6", Address: "Address: Code2Succeed-6" },
                     { FullName: "Code2Succeed-7", age: "7", Address: "Address: Code2Succeed-7" },
                     { FullName: "Code2Succeed-8", age: "8", Address: "Address: Code2Succeed-8" },
                     { FullName: "Code2Succeed-9", age: "9", Address: "Address: Code2Succeed-9" },
                     { FullName: "Code2Succeed-10", age: "10", Address: "Address: Code2Succeed-10" }
                     ];
    });
</script>
</html>

Output:

Initial stage-

After user input-

After user input exceeds age limit over 10-

In the example above, the rows of table will be populated based on user input for age limit. However if the age limit to be added by user exceeds 10, then entire table will hide and displaying a message saying “Please enter age within range of 1-10.

Leave a Reply

Your email address will not be published. Required fields are marked *