AngularJS ng-click

Updated on January 4, 2016     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>
</div>

 <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;
      };
 }]);
 </script>

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.