Home
Tutorials
Microsoft Technologies Tutorials
Java Programming Tutorials
Web Designing Tutorials
Script Programming Tutorials
Database Programming Tutorials
Mobile Technologies Tutorials
Other Programming Tutorials
Examples
Articles
Tools
News
AngularJS Show Hide Div on Click Example
Keywords : Angularjs ng-show, ng-hide example, Angularjs show hide on click example, Angularjs show hide div / button elements on click example, Angularjs show hide table rows example
Example
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> AngularJs show, hide div elements on click example </title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script> var app = angular.module("AngularshowhideApp", []); app.controller('showhidectrl', function ($scope) { $scope.showval = true; $scope.hideval = false; $scope.isShowHide = function (param) { if (param == "show") { $scope.showval = true; $scope.hideval = true; } else if (param == "hide") { $scope.showval = false; $scope.hideval = false; } else { $scope.showval = true; $scope.hideval = false; } } }); </script> </head> <body ng-app="AngularshowhideApp"> <h2>AngularJs Show, Hide Div Elements on Click Example</h2> <div ng-controller="showhidectrl"> Enter Name to Display : <input type="button" ng-click="isShowHide('show')" value="Show Div"> <input type="button" ng-click="isShowHide('hide')" value="Hide Div"> <br /> <!--Show Div Based on showval--> <div ng-show="showval">Show Div: I will Appear on Show Click</div><br /> <!--Hide Div Based on showval--> <div ng-hide="hideval">Hide Div: I will Appear on Hide Click</div> </div> </body> </html>
Click Here to See Result
Result
Previous
Next