Angularjs ng-keypress Event Handling Directive

In this Post We Will Explain About is Angularjs ng-keypress Event Handling Directive With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Angular ng-keypress Directive Example

In this post we will show you Best way to implement AngularJS ng-keypress Event with Example, hear for Managing User Input Key-Events Across Views In AngularJS with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Add Angular JS Dependency

First of all, we need to Pur Angular JS libs and in this post, We are using a CDN for Angular Therefor you need Data internet connection for it to work. Basic Place this some directive inside the HTML header sections head tag of Our html.

Define simple App Name

And then, we need to init simple angular app name using angular ng-app directive. You Can place this in Main Root html, body or HTML div tag depending on your display area Our needs. In this post, We have placed it in Basic html tag.

Define simple Controller

Same as angular app name you can main place it in Body or any html Tags, body or div tag using angular ng-controller defiend but make sure that Our web app name comes simple first than Our angular controller or Our controller wont be first read.

Creating simple Textbox

After that step in to make simple HTML textbox where we defiend simple custom angular directive that we are gonna to make in simple angular js named Like as live-enter.

Creating simple Angular JS Script

Last step, we create simple angular js main custom script which Data contains simple custom angular directive and simple angular controller.

var liveApp = angular.module('liveApp', []);
 
liveApp.directive('liveEnter', function () {
	return function ($scope, element, attrs) {
	       element.bind("keydown keypress", function (event) {
	            if(event.which === 13) {
	                $scope.$apply(function (){
	                    $scope.$eval(attrs.liveEnter);
	                });
 
	                event.preventDefault();
	           }
	       });
	};
});
 
liveApp.controller('liveCtrl', function($scope){
	$scope.disalogInput = function(){
		alert($scope.liveInput);
	}
});

now, we created a angular custom directive that upon angular directive Enter keypress, in simple HTML input html, disalogInput methods is called. In simple angular MVC Basedcontroller, disalogInput methods alerts dialog box the HTML input of simple textbox.

Full HTML – AngularJS Catch Enter Keypress Event

Last, You Show the Full HTML Soure code of this AngularJS Catch Enter Keypress Event Example:

	
	
	
    


	

		
Angular Press enter to display alert Input Value Example
		

			
		
	

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Example

I hope you have Got What is How to use a keypress event in AngularJS? And how it works.I would Like to have FeedBack From My Blog(Pakainfo.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(Pakainfo.com) Are Most Always Welcome.