Angularjs: input [ text ]ngChange는 값이 변경되는 동안 실행됩니다.

Angularjs: input [ text ]ngChange는 값이 변경되는 동안 실행됩니다.

ngChange는 값이 변경되는 동안 실행됩니다(ngChange는 기존의 onChange 이벤트와 유사하지 않습니다).콘텐츠가 커밋될 때만 발생하는 기존 onChange 이벤트를 angularjs로 바인딩하려면 어떻게 해야 합니까?

현재 바인딩:

<input type="text" ng-model="name" ng-change="update()" />

이 게시물에서는 블러 이벤트가 발생할 때까지 입력에 대한 모델 변경을 지연시키는 지시어의 예를 보여 줍니다.

새로운 ng-model-on-blur 디렉티브로 동작하는ng-change를 나타내는 바이올린을 다음에 나타냅니다.이것은 원래의 바이올린을 약간 수정한 것에 주의해 주세요.

코드에 디렉티브를 추가하면 바인딩이 다음과 같이 변경됩니다.

<input type="text" ng-model="name" ng-model-onblur ng-change="update()" />

지시사항은 다음과 같습니다.

// override the default input to update on blur
angular.module('app', []).directive('ngModelOnblur', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        priority: 1, // needed for angular 1.2.x
        link: function(scope, elm, attr, ngModelCtrl) {
            if (attr.type === 'radio' || attr.type === 'checkbox') return;

            elm.unbind('input').unbind('keydown').unbind('change');
            elm.bind('blur', function() {
                scope.$apply(function() {
                    ngModelCtrl.$setViewValue(elm.val());
                });         
            });
        }
    };
});

---

주의: @wjin이 아래 코멘트에서 언급했듯이 이 기능은 Angular 1.3(현재 베타 버전)에서 직접 지원됩니다.ngModelOptions자세한 것은, 문서를 참조해 주세요.

이것은 향후의 답변으로 사용할 수 있도록 최근 AngularJs에 추가된 내용에 대한 것입니다(또 다른 질문도 마찬가지).

Angular 새 버전(현재 1.3 베타 버전), AngularJS는 기본적으로 이 옵션을 지원합니다.ngModelOptions,맘에 들다

ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"

NgModelOptions 문서

예:

<input type="text" name="username"
       ng-model="user.name"
       ng-model-options="{updateOn: 'default blur', debounce: {default: 500, blur: 0} }" />

기타 "입력" 키 누르기 지원을 원하는 사용자가 있을 경우 Gloppy에서 제공하는 바이올린에 대한 업데이트를 알려드립니다.

키 누르기 바인딩 코드:

elm.bind("keydown keypress", function(event) {
    if (event.which === 13) {
        scope.$apply(function() {
            ngModelCtrl.$setViewValue(elm.val());
        });
    }
});

IE8('input'은 언바인드'를 좋아하지 않음)에 어려움을 겪고 있는 사람들을 위해, 저는 이 문제를 해결할 방법을 찾았습니다.

지시문에 $sniffer를 삽입하고 다음을 사용합니다.

if($sniffer.hasEvent('input')){
    elm.unbind('input');
}

이렇게 하면 IE8이 진정됩니다. : )

제가 아는 바로는 select 옵션과 함께 ng-change를 사용하고 텍스트 박스의 경우 ng-blur를 사용해야 합니다.

$scope를 사용하지 않습니다.$watch는 범위 변수의 변화를 더 잘 반영합니까?

기본 입력 onChange 동작을 덮어씁니다(제어 손실 포커스와 값이 변경된 경우에만 함수를 호출합니다).

메모: ngChange는 기존의 onChange 이벤트와 유사하지 않습니다.값이 변경되는 동안 이벤트를 기동합니다.이 지시어는 포커스를 받으면 요소의 값을 저장합니다.
블러시에 새로운 값이 변경되었는지 여부를 체크하고 변경되었을 경우 이벤트를 기동합니다.

@param {String} - "onChange"가 실행될 때 호출되는 함수 이름

@put < input my - on - change = " my Func " ng - model = " model " >

angular.module('app', []).directive('myOnChange', function () { 
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            myOnChange: '='
        },
        link: function (scope, elm, attr) {
            if (attr.type === 'radio' || attr.type === 'checkbox') {
                return;
            }
            // store value when get focus
            elm.bind('focus', function () {
                scope.value = elm.val();

            });

            // execute the event when loose focus and value was change
            elm.bind('blur', function () {
                var currentValue = elm.val();
                if (scope.value !== currentValue) {
                    if (scope.myOnChange) {
                        scope.myOnChange();
                    }
                }
            });
        }
    };
});

나도 똑같은 문제가 있었는데 이게 나한테 효과가 있었어.ng-model-update ★★★★★★★★★★★★★★★★★」ng-keyup이제 가도 돼!여기 그 문서들이 있습니다.

 <input type="text" name="userName"
         ng-model="user.name"
         ng-change="update()"
         ng-model-options="{ updateOn: 'blur' }"
         ng-keyup="cancel($event)" />

언급URL : https://stackoverflow.com/questions/11868393/angularjs-inputtext-ngchange-fires-while-the-value-is-changing