ng-show and ng-hide in angularjs

ng-show and ng-hide in angularjs

The ng-Show and ng-Hide are use to show or hide the HTML  elements in the angularjs single page apps.  Live plnker demo

The angularjs provided the functions which are ng-Show and ng-Hide.

<div ng-hide="true">if ng-hide is true then show contents of this div.</div>
<div ng-show="true">if ng-show is true then show contents of this div. </div>

Example.

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
    <script>
        function mainController($scope) {
            $scope.display = {
                ngShow: true,
                ngHide: true,
                showContent: 'This is ng-show and ng-hide in angularjs contents'
            };
        }
    </script>
</head>
<body ng-app>
    <div ng-controller="mainController">
        <h2>ng-show and ng-hide in angularjs</h2>
        <div>
            <div ng-show="display.ngShow">
                ng-Show : {{display.ngShow}} , {{display.showContent}}
            </div>

            <div ng-hide="display.ngHide">
                {{display.ngHide}} : {{display.hideContent}}
            </div>
        </div>
    </div>
</body>
</html>







ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.