AngularJs ng-keyup Directive

What is ng-keyup directive? Why we use it?

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.

The example as,

//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,

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...
http://www.code-sample.com
http://www.code-sample.xyz

AngularJs ng-keyup Directive

About Blogger

0 comments:

Post a Comment

Video Of Day