ng-keypress 키보드를 누를때 발생하는 이벤트 처리 ( 엔터키 처리 )

요즘은 Angular 를 다뤄보고 있습니다. 

몇일 다뤄본 소감은 재미있습니다.!

오늘은 간략히 Angular 에서 ng-keypress event 를 이용해 엔터키를 식별하는 소스를 구현해보겠습니다.

공식 사이트에 있는 내용은 다음과 같습니다. 

간략한 예제로 사용방법에 대해 설명하고있습니다. 

그러나 이걸로는 부족하겠죠? 실제 구현을 해보겠습니다.

html 에서 password 필드를 만들고 ng-keypress 를 입력하고 실행할 함수를 입력합니다. 파라미터에 $event 를 넘기는것이 핵심입니다.!

<input type="password" placeholder=" your password" class="btn-block" ng-model="userpw" ng-keypress="onKeyPress($event)">

함수가 정의되어있는 Js로 가보겠습니다.

angular.module('eventApp')
    .controller('login_main', function ($scope,executeResults ,$http, $route, $rootScope, $location ,$routeParams) {

        $scope.onKeyPressResult  = "";

        var getKeyboardEventResult = function (keyEvent)
        {
            return (window.event ? keyEvent.keyCode : keyEvent.which) ;
        };
        //엔터 클릭
        $scope.onKeyPress = function ($event) {

            if(getKeyboardEventResult($event) ==13){
                $scope.onKeyPressResult = "Enter KEY Pressed.!";
            }else{
                $scope.onKeyPressResult = "NOT Pressed ENTER KEY!";
            }
        };

Angular 컨트롤러가 정의된 부분에서  onKeyPress 함수를 실행시키고 받아온 $event 값을 통해 getKeyboardEventResult 함수를 호출하여 리턴값으로 눌린 키보드의 

코드값을 가져오게 됩니다. 여기서 참고로 엔터키는 13 입니다.

<h5>{{ onKeyPressResult }}</h5>

컨트롤러 내부에 정의된 $scope.onKeyPressResult 를 html 상에 password 필드 밑에 불러오게 했습니다.

엔터키가 눌리면 하단부에 Enter KEY Pressed.! 가 출력되고

엔터키외에 키가 눌리면 NOT Pressed ENTER KEY! 가 출력되게 됩니다.