AngularJS ng-click Directive

The AngularJS ng-click directive facilitates you to specify custom behavior when an element is clicked. So, it is responsible for the result what you get after clicking.

It is supported by all HTML elements.

Syntax:

Parameter explanation:

expression: It specifies an expression that is executed when an element is clicked.

Let's take an example to demonstrate the ng-click directive.

See this example:

Example1:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<p>Click the button:</p>
<button ng-click="count = count + 1" ng-init="count=0">OK</button>
<p>The button has been clicked <strong>{{count}} </strong>times.</p>
<p><strong>Note:</strong>This example counts a value every time you click on the button and increase the value of the variable.</p>
</body>
</html>

Test it Now

ng-click directive example using function

Example2:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
  <p>Click the button to execute a function:</p>
  <button ng-click="myFunc()">OK</button>
  <p>The button has been clicked <strong>{{count}}</strong> times.</p>
</div>
<script>
angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
    $scope.count = 0;
    $scope.myFunc = function() {
      $scope.count++;
    };
  }]);
</script>
</body>
</html>

Test it Now

Next TopicAngularJS ng-cloak Directive

← prev next →