AngularJS ng-click

Updated on     Kisan Patel

The ng-click directive defines an AngularJS click event.

Here, we need to use the ng-show or ng-hide directive in conjunction with a controller to change the visibility status on button click.

<div ng-app="app" ng-controller="simpleController">
   <button ng-click="toggle()">Toggle</button>
   <p ng-show="visible">Hello World!</p>
 <script type="text/javascript">
 var myApp = angular.module('app', []);
 myApp.controller("simpleController", ['$scope', function($scope){
      $scope.visible = true;
      $scope.toggle = function() {
         $scope.visible = !$scope.visible;

The ng-show directive can be used to set the visibility of a part of an application.

The value ng-show = "true" makes an HTML element visible.

The value ng-show = "false" makes the element invisible.

The ng-click directive will call the toggle() function of our controller on button click. Note that the ng-show directive is bound to the visible scope variable and will toggle the paragraph’s visibility accordingly.



Leave a Reply