Menu ▼


ng-show, ng-hide directive in AngularJS

The ng-show or ng-hide directive shows or hides the HTML element based on the expression value.

    ng-show
  • If expression value is true, it will make HTML element visible
  • If expression value is false, it will hide HTML element
  • Syntax:
    <p ng-show="showpara">Para text</p>
    ng-hide
  • If expression value is true, it will hide HTML element
  • If expression value is false, it will make HTML element visible
  • Syntax:
    <p ng-hide="hidepara">Para text</p>

Example:

You can hide or show this paragraph using ng-show



You can hide or show this paragraph using ng-hide


Source code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body>
<div ng-app="SampleApp" ng-controller="SampleCntrl">
    <input id="chbshow" type="checkbox" ng-model="showpara" /><label for="chbshow">Show
        Paragraph</label>
    <p ng-show="showpara" style="background: green; color: #fff; font-size: 14px; font-weight: bold;
        padding: 10px;">
        You can hide or show this paragraph using ng-show</p>
    <br />
    <br />
    <input id="chbhide" type="checkbox" ng-model="hidepara" /><label for="chbhide">Hide
        Paragraph</label>
    <p ng-hide="hidepara" style="background: blue; color: #fff; font-size: 14px; font-weight: bold;
        padding: 10px;">
        You can hide or show this paragraph using ng-hide</p>
</div>
<script>
    var myapp = angular.module("SampleApp", []);
    myapp.controller("SampleCntrl", function ($scope) {
        $scope.showpara = true;
        $scope.hidepara = false;
    });
</script>
</body>
</html>





comments powered by Disqus


Search dotnetlearners.com