ngModel स्वरूप और पार्सर्स

Question

मैंने एक ही प्रश्न को अलग-अलग रूप में पोस्ट किया, लेकिन किसी ने उत्तर नहीं दिया। मुझे इस बात की स्पष्ट तस्वीर नहीं मिल रही है कि कोणीय js में प्रारूपक और पार्सर क्या करते हैं।

परिभाषा के अनुसार, दोनों फॉर्मेटर्स और पर्सर्स मेरे लिए समान दिखते हैं। शायद मैं गलत हूं, क्योंकि मैं इस कोणीय के लिए नया हूं।

प्रारूपक परिभाषा

जब भी मॉडल के मूल्य में परिवर्तन होता है, पाइपलाइन के रूप में निष्पादित करने के लिए कार्यों की सरणी। प्रत्येक फ़ंक्शन को कहा जाता है, बदले में, अगले के माध्यम से मान गुजरता है। नियंत्रण और सत्यापन में प्रदर्शन के लिए मूल्यों को प्रारूपित / परिवर्तित करने के लिए उपयोग किया जाता है।

पार्सर्स परिभाषा;

जब भी नियंत्रण डोम से मूल्य को पढ़ता है, एक पाइपलाइन के रूप में निष्पादित करने के लिए कार्यों की सरणी। प्रत्येक फ़ंक्शन को कहा जाता है, बदले में, अगले के माध्यम से मान गुजरता है। मान के साथ-साथ सत्यापन को परिवर्तित / परिवर्तित करने के लिए उपयोग किया जाता है। सत्यापन के लिए, पार्सर्स को $ setValidity () का उपयोग करके वैधता स्थिति को अपडेट करना चाहिए, और अमान्य मानों के लिए अपरिभाषित लौटना चाहिए।

कृपया सरल उदाहरण के साथ दोनों विशेषताओं को समझने में मेरी मदद करें। दोनों के एक सरल चित्रण की सराहना की जाएगी।

Comments

फॉर्मेटर्स एक मॉडल के प्रदर्शित मूल्य को संशोधित करते हैं, जैसे [phone]फोन नंबर के लिए प्रदर्शित करना। पार्सर्स हर बार परिवर्तन होने वाले डेटा को पढ़ते हैं और आमतौर पर इनपुट की $ वैध स्थिति निर्धारित करने के लिए उपयोग किया जाता है। डॉक्स में दोनों के उदाहरण हैं।

— km6zla

Answer 1

यह विषय वास्तव में एक संबंधित प्रश्न में अच्छी तरह से कवर किया गया था: एंगुलरजेएस में दो-तरफा फ़िल्टर कैसे करें?

संक्षेप में:

• फॉर्मेटर्स बदलते हैं कि मॉडल मान दृश्य में कैसे दिखाई देंगे।
• पार्सर्स बदलते हैं कि मॉडल में मूल्यों को कैसे बचाया जाएगा।

यहाँ एक सरल उदाहरण है, NgModelController एपि प्रलेखन में एक उदाहरण पर निर्माण :

  //format text going to user (model to view)
  ngModel.$formatters.push(function(value) {
    return value.toUpperCase();
  });

  //format text from the user (view to model)
  ngModel.$parsers.push(function(value) {
    return value.toLowerCase();
  });

आप इसे कार्रवाई में देख सकते हैं: http://plnkr.co/UQ5q5FxyBzIeEjRYYVGX?plnkr=legacy

<input type="button" value="set to 'misko'" ng-click="data.name='misko'"/>
<input type="button" value="set to 'MISKO'" ng-click="data.name='MISKO'"/>
<input changecase ng-model="data.name" />

जब आप (मॉडल को देखने के लिए) नाम लिखते हैं, तो आप देखेंगे कि मॉडल हमेशा निचला होता है। लेकिन, जब आप एक बटन क्लिक करते हैं और प्रोग्राम को नाम (मॉडल को देखने के लिए) बदलते हैं, तो इनपुट फ़ील्ड हमेशा अपरकेस होता है।

Comments

क्या इस प्रकार को उपयोगकर्ता प्रकारों के रूप में सेट करने का कोई तरीका है? आप "प्रोग्रामिक रूप से" कहते हैं, लेकिन मैं कोशिश कर रहा हूं कि $ व्यूवल्यू तैयार हो जाए क्योंकि उपयोगकर्ता इनपुट में प्रवेश करता है, उदाहरण के लिए क्रेडिट कार्ड नंबर फॉर्मेटिंग के लिए

— iamyojimbo

@SavvasNicholas यदि मैं गलत नहीं हूं, तो आप ngModel.$setViewValue(transformedInput);इसे ngModel.$render();$ पार्सर्स फ़ंक्शन से सेट करने और रेंडर करने के लिए उपयोग करेंगे।

— जैकब एंसर

मेरे मामले में, क्या $formattersकरते हैं, तुरंत वापस कर दिया जाता है $validators। ;

— मिखाइल बैटसर

FYI करें संदर्भित प्लंकर का कोई अस्तित्व नहीं है

— क्रिस ब्राउन

यदि आप बटन को धक्का देते हैं तो मैं केवल

— फॉर्मेटर को

Answer 2

फॉर्मेटर्स और पार्सर्स के लिए एक और उपयोग यह है कि जब आप यूटीसी समय में तारीखों को स्टोर करना चाहते हैं और इनपुट पर स्थानीय समय में प्रदर्शित करते हैं, तो मैंने इसके लिए डेटापिकर निर्देश और utcToLocal फ़िल्टर बनाया।

(function () {
    'use strict';

    angular
        .module('app')
        .directive('datepicker', Directive);

    function Directive($filter) {
        return {
            require: 'ngModel',
            link: function (scope, element, attr, ngModel) {
                element.addClass('datepicker');
                element.pickadate({ format: 'dd/mm/yyyy', editable: true });

                // convert utc date to local for display
                ngModel.$formatters.push(function (utcDate) {
                    if (!utcDate)
                        return;

                    return $filter('utcToLocal')(utcDate, 'dd/MM/yyyy');
                });

                // convert local date to utc for storage
                ngModel.$parsers.push(function (localDate) {
                    if (!localDate)
                        return;

                    return moment(localDate, 'DD/MM/YYYY').utc().toISOString();
                });
            }
        };
    }
})();

यह इस utcToLocal फ़िल्टर का उपयोग करता है जो सुनिश्चित करता है कि स्थानीय समय में परिवर्तित होने से पहले इनपुट तिथि सही प्रारूप में है।

(function () {
    'use strict';

    angular
        .module('app')
        .filter('utcToLocal', Filter);

    function Filter($filter) {
        return function (utcDateString, format) {
            if (!utcDateString) {
                return;
            }

            // append 'Z' to the date string to indicate UTC time if the timezone isn't already specified
            if (utcDateString.indexOf('Z') === -1 && utcDateString.indexOf('+') === -1) {
                utcDateString += 'Z';
            }

            return $filter('date')(utcDateString, format);
        };
    }
})();

क्षणों का उपयोग स्थानीय रूप से utc तारीखों में बदलने के लिए किया जाता है।

pickadate.js तारीख का उपयोग करने वाला प्लगइन है