The ng-click directives are used to
define an angular click event i.e.
If you want to add and fire a click
event on HTML button that time we need to use these events.
When you click on button in the below
example, the ngClick function get called.
As you can see in the below controller
function "AddName" get called after button clicked.
<button ng-click="AddName()">Display for ngClick FullName</button>
//The AngularJs code sample var app = angular.module('myApp', []); app.controller('ngClickCtrl', function ($scope) { $scope.firstName = "Anil"; $scope.lastName = "Singh"; $scope.IsActive = false; $scope.AddName = function () { $scope.IsActive = true; }; }); //The Full live demo(HTML+Angular) code sample <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>What is ngClick directive? Why we use it?</title> <script src="https://code.angularjs.org/1.4.1/angular.js"></script> <script> var app = angular.module('myApp', []); app.controller('ngClickCtrl', function ($scope) { $scope.firstName = "Anil"; $scope.lastName = "Singh"; $scope.IsActive = false; $scope.AddName = function () { $scope.IsActive = true; }; }); </script> </head> <body ng-app="myApp"> <h3>What is ngClick directive? Why we use it?</h3> <div ng-controller="ngClickCtrl"> <div> First Name: <input type="text" ng-model="firstName"> Last Name: <input type="text" ng-model="lastName"> <div ng-show="IsActive">Full Name: {{firstName + " " + lastName}} </div> </div> <div> <button ng-click="AddName()">Display for ngClick FullName</button> </div> </div> </body> </html>The output as,
About Blogger
|
Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
|
0 comments:
Post a Comment