programing

공백 입력 시 ng-change를 트리거하려면 어떻게 해야 하나요?

megabox 2023. 3. 25. 11:00
반응형

공백 입력 시 ng-change를 트리거하려면 어떻게 해야 하나요?

텍스트 영역의 값이 변경되면 호출되는 함수가 있습니다.스페이스 바를 누르면 아무것도 호출되지 않습니다.이것을 활성화 하는 방법이 있나요?기술적으로는 내용이 변화하고 있기 때문에, 어쨌든 그 기능을 호출해 주었으면 합니다.

코드와 함께 바이올린을 첨부합니다.를 볼 수 있습니다.$scope.logarray는 스페이스바를 눌렀을 때(키 입력) 새로운 요소를 푸시하지 않지만 공백이 아닌 다른 키와 푸시합니다.

바이올린 샘플: http://jsfiddle.net/UJWLN/4/

ng-trim 명령어를 입력에 사용하여 다음과 같이 false로 설정할 수 있습니다.

<textarea ng-change="changeFunction()" ng-model="myModel" ng-trim="false"></textarea>

하지만 모든 경우에 효과가 있는 것은 아닙니다.키를 누를 때마다 무언가를 실행할 경우 커스텀 디렉티브를 사용합니다.널 위해 하나 썼어

http://jsfiddle.net/UJWLN/6/

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

반응형