Angular ng-click Directive in Controller

Angular ng-click Directive in Controller

Today, We want to share with you Angular ng-click Directive in Controller.
In this post we will show you AngularJs ng-click Event Example, hear for AngularJS Events: ng-click, ng-show, ng-hide we will give you demo and example for implement.
In this post, we will learn about Angular ng-click Directive demo with an example.

ng-click

The ng-click events directive says to AngularJS what to do when an HTML tags element is howmany times clicked.

AngularJs ng-click Event Example

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
	<body ng-app="">
		<p>Simple Click This Submit button:</p>
		<button ng-click="count_no = count_no + 1" ng-init="count_no=0">OK</button>
		<p>The button has been clicked to <mark> <strong>{{count_no}}</strong></mark> times.</p>
		<p>
			<hr/>
			<h1>Solution of AngularJs All Problems For infinityknow.com</h1>
			<h3>
			<a href="https://infinityknow.com/" alt="Link of angularjs Solution example and demo">My First Web-Application in angularjs, So I am very happy and 1000+  more then people are used of infinityknow.com </a>
		</p>
	</body>
</html>

ng-click call function with parameter

<div class="testdemo" ng-controller="newCtrl">
  <div ng-repeat="pt in posts">
   <button ng-click="removeTaskdelete(pt.id);">Delete Data</button>
  </div>
<div>

Script 

var app = angular.module('app', []);

function newCtrl($scope) {
  $scope.tasks = [{id:1,'name':'Angularjs-ng-click'}, {id:2,'name':'angular ng-click directive'}, {id:3,'name':'angularjs-infinityknow.com'}];
    
  $scope.removeTaskdelete = function(id){
    alert("New Post Id is "+id);
  };
}

angularjs ng-click href

<button ng-click="go('/home')">Go Home</button>
<button ng-click="go('/about')">Go About us</button>

<a href="" ng-click="logout()">Sign out</a>

$scope.go = function ( path ) {
  $location.path( path );
};


angularjs ng-click call directive

<div data-ng-app="infinityknowApp">
    <div data-ng-controller="SimpleCtrl">
        <my-directive data-ng-click="myFirstFunction('Hallo')"></my-directive>
        <my-directive data-ng-click="mySecondFunction('Hi')"></my-directive>
    </div>
</div>


var app = angular.module('infinityknowApp', []); //module define

app.directive('myDirective', function(){
    return {
        restrict: 'EA',
        replace: true,
        scope: {
            eventHandler: '&ngClick'
        },
        template: '<div id="holder"><button data-ng-click="eventHandler()">Simple Call My function</button></div>'
    };
});

app.controller('SimpleCtrl', ['$scope', function($scope) {
    $scope.myFirstFunction = function(msg) {
         alert(msg + '!!! Your first function is call!');   
    };
    $scope.mySecondFunction = function(msg) {
         alert(msg + '!!! your second function is call!');   
    };
}]);

ng-click pass object

ng-click="collapseQuestion($event);"

function collapseQuestion($event) {
    $event.currentTarget //For basic Example of do something with currentTarget
}

Angularjs ng-click Example

READ :  Add Remove and Update specific data In JSON using AngularJS

We hope you get an idea about Angular ng-click Directive in Controller
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

We hope This Post can help you…….Good Luck!.

Add a Comment

Your email address will not be published. Required fields are marked *