Thursday, July 7, 2016

AngularJs: ng-show and ng-hide directive example

In this article I am going to explain how to use the ng-show and ng-hide directive of AngularJs.


Description:
Ng-show and ng-hide directive are used to show and hide the DOM element like textbox, div etc.

Implementation:

Ng-show example:

Example 1:

In this example show the textbox on checkbox click.
<fieldset style="width:30%">
    <legend>AngualarJs Tutorial : ng-show/ng-hide Directive</legend>
    <div ng-app="mvcapp" ng-controller="AngularController">  
        Show and Hide textbox<input type="checkbox" ng-model="IsShow" /><br />
        <input type="text" ng-show="IsShow"
    </div>
</fieldset>


 Result:
AngularJs: ng-show and ng-hide directive example

Example 2:
In this example show div element on button click.
HTML Markup:
<fieldset style="width:30%">
    <legend>AngualarJs Tutorial : ng-show/ng-hide Directive</legend>
    <div ng-app="mvcapp" ng-controller="AngularController">  
        <input type="button" value="Show Textbox" ng-click="hideshow()" /><br />
        <div ng-show="Ishow">
            Name : <input type="text" />
        </div>      
    </div>
</fieldset>

Add the script:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script>
    var app = angular.module('mvcapp', []);
    app.controller('AngularController', function ($scope) {
        $scope.hideshow = function(){
       $scope.Ishow =  $scope.Ishow ? false:true;
        }
    });
</script>

Ng-hide example:
In this example hide the displaying textbox on checkbox click.

Example 1:
<fieldset style="width:30%">
    <legend>AngualarJs Tutorial : ng-show/ng-hide Directive</legend>
    <div ng-app="mvcapp" ng-controller="AngularController">  
        Show and Hide textbox<input type="checkbox" ng-model="IsShow" /><br />
        <input type="text" ng-hide="IsShow"
    </div>
</fieldset>

Result:
AngularJs: ng-show and ng-hide directive example

Example 2:
In this example hide the div element on button click.
<fieldset style="width:30%">
    <legend>AngualarJs Tutorial : ng-show/ng-hide Directive</legend>
    <div ng-app="mvcapp" ng-controller="AngularController">  
        <input type="button" value="Show Textbox" ng-click="hideshow()" /><br />
        <div ng-hide="Ishide">
            Name : <input type="text" />
        </div>      
    </div>
</fieldset>

Add the script: 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script>
    var app = angular.module('mvcapp', []);
    app.controller('AngularController', function ($scope) {
        $scope.Ishide = false;
        $scope.hideshow = function () {
            $scope.Ishide = $scope.Ishide ? false : true;
        }
    });
</script>

No comments:

Post a Comment