Introduction
Here I will explain how to use ng-click event directive example in AngularJS for button click or show / hide div on button ng-click event in AngularJS or show / display or hide in AngularJS using button ng-click with example. By using “ng-show”, “ng-hide” properties in AngularJS we can show or hide div elements.
To show or hide div on button click in AngularJS we need to write the code like as shown below
.................................................................................................
// Show Div $scope.showDiv = function () { $scope.showhideprop = true; } // Hide Div $scope.hideDiv = function () { $scope.showhideprop = false; }
.................................................................................................
If you want to check it in complete example you need to write the code like as shown below
HTML-
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Angularjs show or hide Div on button click</title> <script src="https://ajax.googleapis.com/ajax/libs/
angularjs/1.3.9/angular.min.js"></script> <script type="text/javascript"> var myApp = angular.module('sampleapp', []) myApp.controller("expressionController", function ($scope) { // Show Div $scope.showDiv = function () { $scope.showhideprop = true; } // Hide Div $scope.hideDiv = function () { $scope.showhideprop = false; } }); </script> </head> <body> <form id="form1"> <div data-ng-app="sampleapp"
data-ng-controller="expressionController"> <input type="button" ng-click="showDiv()"
value="Show Div"/>
<input type="button" ng-click="hideDiv()"
value="Hide Div"/>
<br /><br /> <div style="padding:10px; border:1px solid black;
width:30%; font-weight:bold" ng-show='showhideprop'>
Hi Welcome to Angularjs... Hello World</div> </div> </form> </body> </html>
No comments:
Post a Comment