AngularJs: ng-show and ng-hide directive example - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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>

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon