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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Buy Books Online at Best Prices

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.