[angularjs] AngularJS에서 키 누르기 이벤트를 사용하는 방법은 무엇입니까?

아래 텍스트 상자에서 Enter 키 누르기 이벤트를 잡고 싶습니다. 더 명확하게하기 위해 a ng-repeat를 사용 하여 tbody를 채 웁니다. HTML은 다음과 같습니다.

<td><input type="number" id="closeqty{{$index}}" class="pagination-right closefield"
    data-ng-model="closeqtymodel" data-ng-change="change($index)" required placeholder="{{item.closeMeasure}}" /></td>

이것은 내 모듈입니다.

angular.module('components', ['ngResource']);

리소스를 사용하여 테이블을 채우고 있으며 컨트롤러 코드는 다음과 같습니다.

function Ajaxy($scope, $resource) {
//controller which has resource to populate the table 
}



답변

다음 directive과 같이 를 추가해야합니다 .

자바 스크립트 :

app.directive('myEnter', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if(event.which === 13) {
                scope.$apply(function (){
                    scope.$eval(attrs.myEnter);
                });

                event.preventDefault();
            }
        });
    };
});

HTML :

<div ng-app="" ng-controller="MainCtrl">
    <input type="text" my-enter="doSomething()">
</div>


답변

대안은 표준 지시문을 사용하는 것입니다 ng-keypress="myFunct($event)"

그런 다음 컨트롤러에서 다음을 수행 할 수 있습니다.

...

$scope.myFunct = function(keyEvent) {
  if (keyEvent.which === 13)
    alert('I am an alert');
}

...


답변

각도 내장 지시문을 사용하는 가장 간단한 방법은 다음과 같습니다.

ng-keypress, ng-keydown또는 ng-keyup.

일반적으로 ng-click으로 이미 처리 된 키보드 지원을 추가하려고합니다.

예를 들어 :

<a ng-click="action()">action</a>

이제 키보드 지원을 추가하겠습니다.

Enter 키로 트리거하십시오.

<a ng-click="action()"
   ng-keydown="$event.keyCode === 13 && action()">action</a>

스페이스 키로 :

<a ng-click="action()"
   ng-keydown="$event.keyCode === 32 && action()">action</a>

공백으로 또는 키를 입력하십시오.

<a ng-click="action()"
   ng-keydown="($event.keyCode === 13 || $event.keyCode === 32) && action()">action</a>

최신 브라우저를 사용하는 경우

<a ng-click="action()"
   ng-keydown="[13, 32].includes($event.keyCode) && action()">action</a>

keyCode에 대한 추가 정보 :
keyCode는 더 이상 사용되지 않지만 잘 지원되는 API이므로 지원되는 브라우저에서 $ evevt.key를 대신 사용할 수 있습니다. https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
에서 자세한 내용을 참조하십시오


답변

또 다른 간단한 대안 :

<input ng-model="edItem" type="text"
    ng-keypress="($event.which === 13)?foo(edItem):0"/>

그리고 ng-ui 대안 :

<input ng-model="edItem" type="text" ui-keypress="{'enter':'foo(edItem)'}"/>


답변

비슷한 요구 사항으로 앱을 만들 때 알아 낸 것은 다음과 같습니다. 지시문을 작성할 필요가 없으며 수행하는 작업을 말하기가 비교적 간단합니다.

<input type="text" ng-keypress="($event.charCode==13)?myFunction():return" placeholder="Will Submit on Enter">


답변

ng-keydown
= “myFunction ($ event)”을 속성으로 사용할 수 있습니다 .

<input ng-keydown="myFunction($event)" type="number">

myFunction(event) {
    if(event.keyCode == 13) {   // '13' is the key code for enter
        // do what you want to do when 'enter' is pressed :)
    }
}


답변

html

<textarea id="messageTxt"
    rows="5"
    placeholder="Escriba su mensaje"
    ng-keypress="keyPressed($event)"
    ng-model="smsData.mensaje">
</textarea>

controller.js

$scope.keyPressed = function (keyEvent) {
    if (keyEvent.keyCode == 13) {
        alert('presiono enter');
        console.log('presiono enter');
    }
};