The ng- keyup is used to
specify to perform the custom behaviour on keyup event.
If you want to add and fire a keyup event on HTML TextBox that time we
need to use these events.
When you keydown on input textbox in the below example, the ngKeyup function get
called.
As you can see in the below controller function keyup get called after ngKeyup in TextBox.
As you can see in the below controller function keyup get called after ngKeyup in TextBox.
//The HTML Code sample <div> First Name:<input type="text" ng-model="firstName" ng-keyup="keyup(IsActive)"> Last Name: <input type="text" ng-model="lastName" ng-keyup="keyup(IsActive)"> </div> //The AngularJs Code sample var app = angular.module('myApp', []); app.controller('ngClickCtrl', function ($scope) { $scope.firstName = "Anil"; $scope.lastName = "Singh"; $scope.IsActive = false; $scope.keyup = function (IsActive) { if (!IsActive) { $scope.IsActive = true; } else { $scope.IsActive = false; } }; }); //The AngularJs and HTML code sample: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>What is ng-keyup 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.keyup = function (IsActive) { if (!IsActive) { $scope.IsActive = true; } else { $scope.IsActive = false; } }; }); </script> </head> <body ng-app="myApp"> <div ng-controller="ngClickCtrl"> <div> First Name:<input type="text" ng-model="firstName" ng-keyup="keyup(IsActive)"> Last Name: <input type="text" ng-model="lastName" ng-keyup="keyup(IsActive)"> </div> <div> <div ng-show="IsActive"> <h3>Full Name: {{firstName + " " + lastName}} </h3></div> </div> </div> </body> </html>The live output as,
Blogger Comment
Facebook Comment