python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions