ngModel ফর্ম্যাটর এবং পার্সার্স

Question

আমি একই প্রশ্নটি বিভিন্ন আকারে পোস্ট করেছি, তবে কেউ উত্তর দেয়নি। ফর্ম্যাটর এবং পার্সাররা কৌণিক জেএসে কী করে তার একটি পরিষ্কার চিত্র পাচ্ছি না।

সংজ্ঞা অনুসারে, ফর্ম্যাটর এবং পার্সার উভয়ই আমার অনুরূপ। আমি ভুল হতে পারি, যেমন আমি এই কৌণিক বিষয়গুলিতে নতুন।

বিন্যাস সংজ্ঞা

পাইপলাইন হিসাবে কার্যকর করার জন্য ফাংশনগুলির অ্যারে, যখনই মডেলের মান পরিবর্তন হয়। প্রতিটি ফাংশন বলা হয়, ঘুরে, পরবর্তী মাধ্যমে মান পাস। নিয়ন্ত্রণ এবং বৈধতা প্রদর্শনের জন্য মান রূপান্তর / রূপান্তর করতে ব্যবহৃত হয়।

পার্সার্স সংজ্ঞা

পাইপলাইন হিসাবে কার্যকর করার জন্য ফাংশনগুলির অ্যারে, যখনই নিয়ন্ত্রণটি ডিওএম থেকে মান পড়বে। প্রতিটি ফাংশন বলা হয়, ঘুরে, পরবর্তী মাধ্যমে মান পাস। মান্যকরণের পাশাপাশি মানকে স্যানিটাইজ / রূপান্তর করতে ব্যবহৃত হয়। বৈধতার জন্য, পার্সারদের $ setValidity () ব্যবহার করে বৈধতা রাষ্ট্র আপডেট করতে হবে এবং অবৈধ মানগুলির জন্য অপরিবর্তিত হওয়া উচিত।

একটি সহজ উদাহরণ সহ উভয় বৈশিষ্ট্য বুঝতে দয়া করে আমাকে সহায়তা করুন। উভয়ের একটি সাধারণ চিত্র প্রশংসা করা হবে।

Comments

ফর্ম্যাটরগুলি [phone]কোনও ফোন নম্বর প্রদর্শনের মতো কোনও মডেলের প্রদর্শিত মান পরিবর্তন করে । পার্সাররা প্রতিবার এটি পরিবর্তিত হয় এবং সাধারণত ইনপুটটির $ বৈধ অবস্থা সেট করতে ব্যবহৃত হয় read দস্তাবেজের উভয়ের উদাহরণ রয়েছে।

— km6zla

Answer 1

সম্পর্কিত বিষয়টিতে এই বিষয়টি সত্যই ভালভাবে কভার করা হয়েছিল: অ্যাঙ্গুলারজেএসে দ্বি-দ্বি ফিল্টারিং কীভাবে করবেন?

সংক্ষেপ:

• ফর্ম্যাটরগুলি পরিবর্তন করে যে কীভাবে মডেল মানগুলি ভিউতে প্রদর্শিত হবে।
• পার্সার্স পরিবর্তনগুলি পরিবর্তন করে যে কীভাবে মডেলগুলিতে দর্শন মানগুলি সংরক্ষণ করা হবে।

এনজিএমডেলকন্ট্রোলার এপিআই ডকুমেন্টেশনে একটি উদাহরণ তৈরি করে এখানে একটি সাধারণ উদাহরণ দেওয়া হয়েছে :

  //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

@ সাভভাসনিকোলস যদি আমার ভুল না হয় তবে আপনি ngModel.$setViewValue(transformedInput);এটি সেট করতে এবং ngModel.$render();পার্সার্স ফাংশন থেকে রেন্ডার করতে ব্যবহার করবেন ।

— জ্যাকব এনসর

আমার ক্ষেত্রে, কি $formattersকরবেন তা তত্ক্ষণাত্ ফিরিয়ে দেওয়া হবে $validators। ; (

— মিখাইল ব্যাটার

এফওয়াইআই রেফারেন্সড প্লঙ্কারের আর কোনও অস্তিত্ব নেই

— ক্রিস ব্রাউন

আমি লক্ষ্য করেছি যে ফর্ম্যাটরটি কেবলমাত্র আপনি বোতামটি

— চাপলেই কাজ করে

Answer 2

ফর্ম্যাটর এবং পার্সারগুলির জন্য আরেকটি ব্যবহার হ'ল আপনি যখন ইউটিসি সময়ে তারিখগুলি সংরক্ষণ করতে এবং স্থানীয় সময়ে ইনপুটগুলিতে প্রদর্শন করতে চান, আমি নীচের তারিখ-পিকার নির্দেশিকা এবং এটির জন্য "Tটোকলোকাল ফিল্টার" তৈরি করেছি।

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

moment.js স্থানীয়ভাবে ইউটিসি তারিখে রূপান্তর করতে ব্যবহৃত হয়।

পিকাদেট.জেএস হ'ল তারিখ-পিকার প্লাগইন