LearnKode

8 Example(s) of Ng-Show-Ng-Hide


Description :

We have a checkbox to hide show the textbox. The textbox will show when the checkbox is checked and if we un-check the checkbox then the value of isChecked variable is false and if we assign false value to the ng-show directive it will hide the div tag.


Ng-Show-Ng-Hide Example - 1 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="Demo">
     <div class="row" ng-controller="myController">
        <span class="col-md-3">
            <span>Hide/Show</span>   <input type="checkbox" ng-model="isChecked" />
        </span>
        <div class="col-md-9" ng-show="isChecked">
            <input type="text" style="width:300px;" class="form-control" />
        </div>
    </div>
<script type="text/javascript">
    var demo = angular.module("Demo", []);
    demo.controller("myController", function ($scope) {
        $scope.isChecked = true;
    });
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example we have an array named colors with color name and value. We show the checkbox for each color using ng-repeat directive and bind the checkbox with the color value either true or false. If the value is true then checkbox is checked and a box with background color shows and if value is false then checkbox is un-checked and color box will not show.


Ng-Show-Ng-Hide Example - 2 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="Demo">
     <div class="row" ng-controller="myController">
        <div class="col-md-3" ng-repeat="color in colors">
            <input type="checkbox" ng-model="color.val" />
            {{color.colorName}}
            <div class="check-element animate-show" ng-show="color.val" style="background-color:{{color.colorName}};height:20px;width:20px;"></div>
        </div>
    </div>
<script type="text/javascript">
    var demo = angular.module("Demo", []);
    demo.controller("myController", function ($scope) {
        $scope.colors = [{ colorName: "pink", val: true }, { colorName: "green", val: false }, { colorName: "Red", val: true }, { colorName: "Yellow", val: true }]
    });
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example we can change the text of button based on the ng-click event.By default text of button is "SHOW" because intially value of isShow variable is false.If we click on the button it will call the "changeValue(true)" function the value of isShow variable become true then text of button will set to "HIDE" and vice versa.


Ng-Show-Ng-Hide Example - 3 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="controllerName">
        <button ng-hide="isShow" ng-click="changeValue(true)">SHOW</button>
        <button ng-show="isShow" ng-click="changeValue(false)">HIDE</button>
    </div>
<script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.isShow = false;
        $scope.changeValue = function (isShow) {
            $scope.isShow = isShow;
        }
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example we can display array elements using ng-repeat directive and show the buttons infront of first and last array element by assigning "$first" and "$last" value to ng-show directive of two buttons respectively.


Ng-Show-Ng-Hide Example - 4 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
    <div ng-init="Arrs=[1, 2, 3, 4, 5, 6, 7, 8, 9]">
        <div ng-repeat="Arr in Arrs">
            {{Arr}}
            <button ng-show="$first">First</button>
            <button ng-show="$last">Last</button>
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example we can check the number whether it is even or odd based on isHide variable.On ng-keyup event we can call the function checkNumber(val),val is variable with ng-model directive which will set the value of textbox to val.In checkNumber() we can calculate the modulus val variable value and set to the isHide.If isHide is false then number is even otherwise number is odd.


Ng-Show-Ng-Hide Example - 5 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="controllerName" ng-init="val=0">
        <div class="row">
            <div class="col-md-6">
                Enter a number:
                <input type="text" ng-model="val" ng-keyup="checkNumber(val)" />
            </div>
            <div class="col-md-6">
                <div ng-hide="isHide"><h3>The number is even</h3></div>
                <div ng-show="isHide"><h3>The number is odd</h3></div>
            </div>
        </div>
    </div>
<script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.checkNumber = function (val) {
            $scope.isHide = val % 2 == 0 ? false : true;
        };
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example, we can change the color of text on ng-mouseleave event which is calling hideShow(isHide) function. If isHide is true then it will show the text "Green Color !" in green color and if isHide is false then "Red Color !" is shown in red color. Angularjs function for toggling the value of isHide: $scope.hideShow = function (val) { $scope.isHide = !val; }; and by default, on ng-init we setup isHide=true.


Ng-Show-Ng-Hide Example - 6 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="controllerName">
        <div class="row">
            <div class="col-md-6" ng-init="isHide=true">
                <div ng-show="isHide" ng-mouseleave="hideShow(isHide)"><h3 style="color:green">Green Color !</h3></div>
                <div ng-hide="isHide" ng-mouseleave="hideShow(isHide)"><h3 style="color:red">Red Color !</h3></div>
            </div>
        </div>
    </div>
<script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.hideShow = function (val) {
            $scope.isHide = !val;
        };
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example, there are two buttons for toggling the two containers. When you click on the "Toggle Lions" button, the Lions Image container will toggle ( toggle means hide and show on the button clicks ) and when click on the "Toggle Cats" button the Cats Image container will toggle. See the example


Ng-Show-Ng-Hide Example - 7 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app>
    <div class="container">
        <div class="row">
          <div class="col-md-12">
            <a class="btn btn-primary" href="#" ng-click="lions = !lions">Toggle Lions</a>
            <a class="btn btn-success" href="#" ng-click="cats = !cats">Toggle Cats</a>
        </div>
        <br />
        <div class="row">
            <div class="col-xs-6 well" ng-show="lions">
                <h3>LIONS IMAGE</h3>
                <!--<img src="Dashboard_US-600x533.png" />-->
            </div>
            <div class="col-xs-6 well" ng-show="cats">
                <h3>CATS IMAGE</h3>
                <!--<img src="Dashboard_US-600x533.png" />-->
            </div>
        </div>
</div>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example there is a dropdown list with Hide and Show options. When user select the Show value from the dropdown the container with text Show Example will show and other container will hide and when user select Hide value from the dropdown the Hide Example Container with different background color will show and Show Example container will hide.


Ng-Show-Ng-Hide Example - 8 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="app">
    <div ng-controller="controllerName">
        <div class="row">
            <div class="col-md-3">
                <select class="form-control" ng-model="ishide" ng-options="t.ishide as t.text for t in temp"></select>
            </div>
            <div class="well col-md-3" style="background-color:AppWorkspace;" ng-hide="ishide">Show Example</div>
            <div class="well col-md-3" style="background-color:salmon;" ng-show="ishide">Hide Example</div>
        </div>
    </div>
<script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.ishide = true;
        $scope.temp = [{ text: "Hide", ishide: true }, { text: "Show", ishide: false }];
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output