Angularjs: इनपुट [टेक्स्ट] एनकेंज चेंज होता है जबकि मूल्य बदल रहा है

Question

एनजीचेंज फायरिंग कर रहा है जबकि मूल्य बदल रहा है (एनचेंज क्लासिक ऑनकेंज इवेंट के लिए अपरिचित नहीं हैं)। मैं एंगुलरज के साथ क्लासिक ऑनकॉन्ग इवेंट को कैसे बाँध सकता हूं, यह केवल तब होगा जब सामग्री शुरू हो जाएगी?

वर्तमान बाध्यकारी:

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

Comments

बस कुछ इसी तरह की तलाश में है और यह मुझे पता चला है कि आप केवल क्षेत्र के मान्य होने पर अद्यतन करने पर विचार करना चाहते हैं। इस तरह से उपयोगकर्ता एक वैध प्रारूप में इनपुट प्राप्त करने के साथ संघर्ष कर सकता है (या आप उन्हें प्रॉम्प्ट और फ़िल्टर के साथ मदद कर सकते हैं) तब आप उन्हें अपडेट के साथ पुरस्कृत कर सकते हैं जब वे इसे ठीक कर लेते हैं!

— स्टीव ब्लैक १

एक और अधिक लचीला समाधान जो घटना को निर्दिष्ट करने के लिए उपयोग करने की अनुमति देता है (सिर्फ धुंधला नहीं) और अन्य गुण बहुत जल्द कोणीय में बनाए जाने चाहिए: github.com/angular/angular.js/pull/2129

— wired_in

Answer 1

यह पोस्ट उस निर्देश का एक उदाहरण दिखाता है जो धमाके की घटना के आग लगने तक मॉडल को इनपुट में बदल देता है ।

यहाँ एक फिडल है जो नए एनजी-मॉडल-ऑन-ब्लर निर्देश के साथ काम करने के बदलाव को दिखाता है। ध्यान दें कि यह मूल फिडेल के लिए एक मामूली मोड़ है ।

यदि आप अपने कोड में निर्देश जोड़ते हैं तो आप अपने बंधन को इस में बदल देंगे:

<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। अधिक जानकारी के लिए डॉक्स देखें ।

Comments

सावधानी, elm.unbind ('इनपुट') Internet Explorer 8 में एक 'TypeError' फेंकता है ताकि अन्य निष्पक्ष बयान बिल्कुल भी निष्पादित न हों। मैंने इसे elm.unbind ('इनपुट') को एक अलग रेखा पर ले जाकर हल किया और इसे एक कोशिश / कैच ब्लॉक के साथ घेर लिया।

— रोब जुर्लिंक

कोणीय 1.2 का एक ng-blurनिर्देश है: docs.angularjs.org/api/ng.directive:ngBlur

— JJ Zabkar

मैंने यह कोड काम किया था, लेकिन मुझे निर्देशन की प्राथमिकता निर्धारित करनी थी (यानी, प्राथमिकता: 100)। मैं Angular 1.2.10 का उपयोग कर रहा हूं। मेरा अनुमान है कि ngModelOnblur निर्देश ngModel निर्देश से पहले चल रहा था इसलिए अभी तक कुछ भी नहीं करना था। इसके अलावा, यह पेज ऐसा प्रतीत होता है कि भविष्य में इसके लिए कोई समाधान बनाया जा सकता है: github.com/angular/angular.js/pull/1783

— एलन वेस्ट

नोट कम से कम कोणीय १.३ में यह कार्यक्षमता डिफ़ॉल्ट प्रलेखन मेंng-model-options="{ updateOn: 'default blur' }" देखें प्रलेखन के

— २३

@RobJuurlink (या कोई और जो IE8 'TypeError' का सामना करता है, जब 'इनपुट' को बाइंड या अनबाइंड करने की कोशिश करता है) - कोणीय के स्रोत को देखते हुए, आप देखेंगे कि वे $snifferयह निर्धारित करने के लिए उपयोग करते हैं कि ब्राउज़र 'इनपुट' का समर्थन करता है या नहीं और यदि नहीं वे 'कीडाउन' पर वापस आते हैं। यदि आप उपरोक्त निर्देश को केवल 'इनपुट' के लिए अद्यतन करते हैं, यदि यह $sniffer.hasEvent('input')सही है - तो आप उस त्रुटि से बच सकते हैं और फिर भी IE8 में काम कर सकते हैं

— bvaughn

Answer 2

यह एंगुलरजेएस के हालिया परिवर्धन के बारे में है, भविष्य के उत्तर के रूप में सेवा करने के लिए ( दूसरे प्रश्न के लिए भी )।

कोणीय नए संस्करण (अब 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} }" />

Comments

यह 1.3 बीटा 5 में सही काम नहीं करता है, लेकिन मौजूदा मास्टर बिल्ड 2602 में तय किया गया है

— मणिकांता

और यही कारण है कि यह अभी भी बीटा में है और "वास्तविक दुनिया" अनुप्रयोगों में उपयोग करने योग्य नहीं है जैसे कि मैं अभी निर्माण कर रहा हूं।

— पुनःपरिभाषित

यहां एनजी-मॉडल-ऑप्शंस जैसे मॉड्यूल के लिए कोणीय 1.2.x github.com/fergaldoyle/modelOptions

— Fergal

Answer 3

बाकी मामले किसी को भी अतिरिक्त की तलाश में कुंजी दबाने समर्थन "enter" में, यहाँ के लिए एक अद्यतन है बेला द्वारा प्रदान की gloppy

कोड बाध्यकारी के लिए कोड:

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

Answer 4

IE8 के साथ संघर्ष करने वाले किसी व्यक्ति के लिए (यह unbind ('इनपुट') को पसंद नहीं करता है, मुझे इसके चारों ओर एक रास्ता मिला।

आपके निर्देश और उपयोग में $ स्निफ़र इंजेक्ट करें:

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

यदि आप ऐसा करते हैं तो IE8 शांत हो जाता है :)

Comments

या बस कोशिश / पकड़

— wired_in

Answer 5

मेरे ज्ञान के अनुसार हमें चुनिंदा विकल्प के साथ एनजी-परिवर्तन का उपयोग करना चाहिए और टेक्स्टबॉक्स के मामले में हमें एनजी-ब्लर का उपयोग करना चाहिए।

Comments

यह अब सही उत्तर है, वापस जब प्रश्न पूछा गया था तो यह स्पष्ट रूप से मौजूद नहीं था।

— डाउन

आपका बहुत-बहुत धन्यवाद ... इसका उत्तर होना चाहिए

— Renjith

Answer 6

क्या स्कोप $ स्कोप का उपयोग नहीं किया जा रहा है। स्कोप वेरिएबल के परिवर्तनों को बेहतर ढंग से दर्शाने के लिए $ वॉच?

Comments

भोजन के लिए विचार: benlesh.com/2013/10/title.html (शीर्षक: आप शायद अपने नियंत्रकों में $ घड़ी का उपयोग न करें)

— BenB

Answer 7

डिफ़ॉल्ट इनपुट ऑनक्रॉस व्यवहार को ओवरराइड करें (केवल फ़ंक्शन तब कॉल करें जब नियंत्रण हानि फोकस और मूल्य बदल गया था)

नोट: ngChange क्लासिक ऑनकॉन्ग इवेंट के समान नहीं है, यह ईवेंट को फायरिंग करता है, जबकि मूल्य बदल रहा है। यह निर्देश तत्व का मान संग्रहीत करता है जब इसे फ़ोकस मिलता है तो
ब्लर्स पर यह जाँचता है कि क्या नया मान बदल गया है और यदि यह ईवेंट फ़ायर करता है

@ अपरम {स्ट्रिंग} - "ऑनक्रास" को फैंकने के लिए फंक्शन का नाम दिया जाना चाहिए

@example <इनपुट पर मेरा परिवर्तन = "myFunc" एनजी-मॉडल = "मॉडल">

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();
                    }
                }
            });
        }
    };
});

Answer 8

मेरे पास बिल्कुल यही समस्या थी और यह मेरे लिए काम करता था। जोड़ें 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)" />