Hello
everyone, I am going to share the how to use AngularJs ngClick directive and its example in detail.
Live
demo link for output : http://embed.plnkr.co/F7TcI8/preview
First, I am going to explain about ngClick directive.
The ngClick directive
is used the handle the user click events of the applications.
Second, I am going to explain about
syntax of ngClick.
<button
type="button"
ng-click="clickMe(IsDisplay)">NG-CLICK</button>
Third,
I am going to share the AngularJs click event code.
var app =
angular.module('myApp',
[]);
app.controller('ngClickCtrl', ["$scope", function ($scope) {
$scope.domain = "code-sample.com";
$scope.IsDisplay = false;
$scope.clickMe = function (clicked) {
$scope.IsDisplay = clicked == true ? false : true;
};
}]);
Last,
I am going to share the live demo example with HTML and AngularJs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ng-click in
AngularJs</title>
<script
src="https://code.angularjs.org/1.4.1/angular.js"></script>
<script>
var app =
angular.module('myApp',
[]);
app.controller('ngClickCtrl', ["$scope", function ($scope) {
$scope.domain = "code-sample.com";
$scope.IsDisplay = false;
$scope.clickMe = function (clicked) {
$scope.IsDisplay = clicked == true ? false : true;
};
}]);
</script>
</head>
<body ng-app="myApp">
<div ng-controller="ngClickCtrl">
<div><h2>ng-click in
AngularJs</h2> </div>
<div>
Domain name: <input type="text" ng-model="domain"> <button type="button" ng-click="clickMe(IsDisplay)">NG-CLICK</button>
</div>
<div>
<div ng-show="IsDisplay"> My Click function
is called. <br /><h3 style="color:green;">Display User detail:
{{domain}} </h3></div>
</div>
</div>
</body>
</html>
The output link : http://embed.plnkr.co/F7TcI8/preview
Thank you!
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
