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

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.