angularjs toggle show hide button

AngularJs toggle using ngShow ngHide and ngClick

Hello everyone, I am going to share the code sample for toggle(show/hide) div using ngShow, ngClick in angularjs. The example detail as given below.

Go and click  for live demo plnker

The AngularJs Code sample as given below

        var cartApp = angular.module('sCartApp', []);
        cartApp.controller('sCartCtrl', function($scope) {

            $scope.ngShowhide = false;
            $scope.ngShowhideFun = function(flag) {
                if (flag) {
                    $scope.ngShowhide = false;
                } else {
                    $scope.ngShowhide = true;
                }
            };
        });

The HTML code sample as given below

<div ng-app="sCartApp">
    <div ng-controller="sCartCtrl">
        <a ng-click="ngShowhideFun(ngShowhide)">angularjs toggle show hide button</a>
        <div ng-show="ngShowhide">
            <div style=" background-color : yellow">
                Hi This is body area!
            </div>
        </div>
    </div>
</div>

The full code HTML and javascript code sample as given below

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
    <script>
        var cartApp = angular.module('sCartApp', []);
        cartApp.controller('sCartCtrl', function($scope) {

            $scope.ngShowhide = false;
            $scope.ngShowhideFun = function(flag) {
                if (flag) {
                    $scope.ngShowhide = false;
                } else {
                    $scope.ngShowhide = true;
                }
            };
        });
    </script>
</head>
<body ng-app="sCartApp">
    <div ng-controller="sCartCtrl">
        <a ng-click="ngShowhideFun(ngShowhide)">angularjs toggle show hide button</a>
        <div ng-show="ngShowhide">
            <div style=" background-color : yellow">
                Hi This is body area!
            </div>
        </div>
    </div>
</body>
</html>

Thank you!!
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 - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book