공백 입력 시 ng-change를 트리거하려면 어떻게 해야 하나요?
텍스트 영역의 값이 변경되면 호출되는 함수가 있습니다.스페이스 바를 누르면 아무것도 호출되지 않습니다.이것을 활성화 하는 방법이 있나요?기술적으로는 내용이 변화하고 있기 때문에, 어쨌든 그 기능을 호출해 주었으면 합니다.
코드와 함께 바이올린을 첨부합니다.를 볼 수 있습니다.$scope.log
array는 스페이스바를 눌렀을 때(키 입력) 새로운 요소를 푸시하지 않지만 공백이 아닌 다른 키와 푸시합니다.
바이올린 샘플: http://jsfiddle.net/UJWLN/4/
ng-trim 명령어를 입력에 사용하여 다음과 같이 false로 설정할 수 있습니다.
<textarea ng-change="changeFunction()" ng-model="myModel" ng-trim="false"></textarea>
하지만 모든 경우에 효과가 있는 것은 아닙니다.키를 누를 때마다 무언가를 실행할 경우 커스텀 디렉티브를 사용합니다.널 위해 하나 썼어
myApp.directive('ngKeystroke', function(){
return {
restrict: 'A',
link: function(scope, elem, attrs){
elem.bind("keyup", function(){
scope.log.push('called');
scope.$digest();
});
}
};
});
트리거하다ng-change
스페이스 바의 이벤트도 사용해 왔습니다.ng-trim
그리고 잘 작동하고 있습니다.
<textarea ng-model="myCtrl.content" name="content" ng-trim="false" rows="5" cols="15" maxlength="250"></textarea>
이 jsfiddle을 사용해 보는 것이 좋습니다.
html
<div ng-controller="MyCtrl">
<textarea key-listener="changeFunction()" ng-model="myModel"></textarea>
<div>{{log}}</div>
</div>
javascript
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.log=[];
$scope.changeFunction=function(){
$scope.log.push('Called');
}
}
myApp.directive('keyListener', function() {
return function(scope, elm, attrs) {
elm.bind("keyup", function(event) {
scope.$apply(attrs.keyListener);
});
};
})
만약 누군가 다시 이 일을 하게 된다면요
매뉴얼에서 방금 읽었습니다.https://docs.angularjs.org/api/ng/input/input%5Btext%5D ngTrim (옵션)
부울
false로 설정하면 Angular는 입력을 자동으로 트리밍하지 않습니다.이 파라미터는 입력[type=password] 컨트롤에 대해 무시되며, 이 컨트롤은 입력을 트리밍하지 않습니다.
다음 코드가 작동했습니다.
HTML:
<input type="text" ng-model="typedEmail" ng-keyup="($event.keyCode == 32) ? validateEmail(typedEmail) : ''">
컨트롤러:
$scope.validateEmail = function(emailId){
//Your Code goes here
};
이벤트 코드 32: 스페이스바 키이벤트 코드를 나타냅니다.
마찬가지로
이벤트 코드 13: Enter 키 이벤트 코드를 나타냅니다.
이벤트 코드 16: Shift 키 이벤트 코드를 나타냅니다.
이벤트 코드 17: 컨트롤 키 이벤트 코드를 나타냅니다.
이벤트 코드 18: Alt 키 이벤트 코드를 나타냅니다.
ng-key 문서를 참조하기만 하면 keyCode 값을 사용해 볼 수 있습니다(각도 문서의 예에서는 아래 참조).
언급URL : https://stackoverflow.com/questions/15282942/how-can-i-trigger-ng-change-when-a-space-is-entered
'programing' 카테고리의 다른 글
한 페이지에 여러 개의 모달 상자 열기 (0) | 2023.03.25 |
---|---|
IE에서 BLOB 다운로드가 작동하지 않습니다. (0) | 2023.03.25 |
Oracle에서 GUID를 생성하는 방법 (0) | 2023.03.25 |
SpringBoot의 @MultipartConfig maxFileSize가 활성화되지 않음 (0) | 2023.03.25 |
개발 데이터베이스와 운영 데이터베이스를 병합하는 가장 좋은 방법은 무엇입니까? (0) | 2023.03.25 |