অ্যাঙ্গুলারজেএস-এ কীভাবে দ্বিমুখী ফিল্টারিং করবেন?

Question

অ্যাঙ্গুলারজেএস একটি আকর্ষণীয় কাজ করতে পারে তা হল কোনও নির্দিষ্ট ডেটাবাইন্ডিং এক্সপ্রেশনটিতে একটি ফিল্টার প্রয়োগ করা, যা প্রয়োগ করার একটি সুবিধাজনক উপায়, উদাহরণস্বরূপ, সংস্কৃতি-নির্দিষ্ট মুদ্রা বা কোনও মডেলের বৈশিষ্ট্যের তারিখ বিন্যাস। স্কোপে গণিত বৈশিষ্ট্যগুলিও পাওয়া ভাল। সমস্যাটি হ'ল এই বৈশিষ্ট্যগুলির কোনওটিই দ্বি-মুখী ডেটাবাইন্ডিং দৃশ্যের সাথে কাজ করে না - সুযোগ থেকে দর্শন পর্যন্ত কেবল একমুখী ডেটাবাইন্ডিং। এটি অন্যথায় দুর্দান্ত লাইব্রেরিতে এক চমকপ্রদ ভুল বলে মনে হচ্ছে - বা আমি কিছু হারিয়ে যাচ্ছি?

ইন KnockoutJS , আমি একটি পঠন / লিখন নির্ণিত সম্পত্তি তৈরী করতে পারে, যা আমার ফাংশন একজোড়া, এক যা সম্পত্তির মূল্য পেতে বলা হয়, এবং এক যা যখন সম্পত্তি সেট করা হয় বলা হয় নির্দিষ্ট করার অনুমতি দেওয়া হয়েছে। এটি আমাকে বাস্তবায়নের অনুমতি দেয়, উদাহরণস্বরূপ, সংস্কৃতি-সচেতন ইনপুট - ব্যবহারকারীকে "$ 1.24" টাইপ করতে দেয় এবং ভিউমোডেলে একটি ফ্লোটে পার্সিং করে এবং ইনপুটটিতে প্রতিফলিত ভিউমোডেলে পরিবর্তন আসে।

আমি এর সাথে সবচেয়ে কাছের জিনিসটি দেখতে পেলাম $scope.$watch(propertyName, functionOrNGExpression);এটির ব্যবহারটি হ'ল এটি যখন আমার কোনও $scopeপরিবর্তন পরিবর্তিত হয় তখন এটি একটি ফাংশন আমন্ত্রণ করতে দেয় । তবে এটি সমাধান করে না, উদাহরণস্বরূপ, সংস্কৃতি-সচেতন ইনপুট সমস্যা। আমি যখন পদ্ধতিটিতেই $watchedসম্পত্তিটি পরিবর্তন করার চেষ্টা করি তখন সমস্যাগুলি লক্ষ্য করুন $watch:

$scope.$watch("property", function (newValue, oldValue) {
    $scope.outputMessage = "oldValue: " + oldValue + " newValue: " + newValue;
    $scope.property = Globalize.parseFloat(newValue);
});

( http://jsfiddle.net/gyZH8/2/ )

ব্যবহারকারী টাইপ করা শুরু করলে ইনপুট উপাদানটি খুব বিভ্রান্ত হয়। সম্পত্তিটিকে দুটি বৈশিষ্ট্যে বিভক্ত করে আমি এর উন্নতি করেছি, একটি আনসারসড মান এবং একটি পার্সড মানের জন্য:

$scope.visibleProperty= 0.0;
$scope.hiddenProperty = 0.0;
$scope.$watch("visibleProperty", function (newValue, oldValue) {
    $scope.outputMessage = "oldValue: " + oldValue + " newValue: " + newValue;
    $scope.hiddenProperty = Globalize.parseFloat(newValue);
});

( http://jsfiddle.net/XkPNv/1/ )

এটি প্রথম সংস্করণের তুলনায় একটি উন্নতি ছিল, তবে এটি আরও কিছুটা ভারবস, এবং লক্ষ্য করুন যে parsedValueসুযোগের পরিবর্তনের সম্পত্তিটির এখনও একটি সমস্যা রয়েছে (দ্বিতীয় ইনপুটটিতে কিছু টাইপ করুন যা parsedValueসরাসরি পরিবর্তন করে notice হালনাগাদ). এটি কোনও নিয়ামক পদক্ষেপ থেকে বা ডেটা পরিষেবা থেকে ডেটা লোড করার মাধ্যমে ঘটতে পারে।

অ্যাঙ্গুলারজেএস ব্যবহার করে এই দৃশ্য বাস্তবায়নের আরও সহজ কোনও উপায় আছে কি? আমি কি ডকুমেন্টেশনে কিছু কার্যকারিতা মিস করছি?

Answer 1

দেখা যাচ্ছে যে এটির জন্য খুব মার্জিত সমাধান রয়েছে তবে এটি সঠিকভাবে নথিভুক্ত নয়।

প্রদর্শনের জন্য বিন্যাসের মডেল মানগুলি |অপারেটর এবং একটি কৌণিক দ্বারা পরিচালনা করতে পারে formatter। দেখা গেছে যে এনজিএমডেলটিতে কেবলমাত্র ফর্ম্যাটরের একটি তালিকাই নেই তবে পার্সারগুলির একটি তালিকা রয়েছে।

1. ng-modelদ্বিমুখী ডেটা বাইন্ডিং তৈরি করতে ব্যবহার করুন

<input type="text" ng-model="foo.bar"></input>

২. আপনার কৌণিক মডিউলটিতে একটি নির্দেশ তৈরি করুন যা একই উপাদানটিতে প্রয়োগ করা হবে এবং এটি ngModelনিয়ামকের উপর নির্ভর করে

module.directive('lowercase', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attr, ngModel) {
            ...
        }
    };
});

৩. linkপদ্ধতির মধ্যে, আপনার কাস্টম রূপান্তরকারীগুলিকে ngModelনিয়ন্ত্রণকারীতে যুক্ত করুন

function fromUser(text) {
    return (text || '').toUpperCase();
}

function toUser(text) {
    return (text || '').toLowerCase();
}
ngModel.$parsers.push(fromUser);
ngModel.$formatters.push(toUser);

৪. আপনার নতুন নির্দেশকে একই উপাদানটিতে যুক্ত করুন যা ইতিমধ্যে রয়েছে ngModel

<input type="text" lowercase ng-model="foo.bar"></input>

এখানে একটি কার্যকারী উদাহরণ যা inputমডেলটিতে ছোট এবং বড় হাতের কাছে টেক্সটকে রূপান্তর করে

মডেল কন্ট্রোলার জন্য API ডকুমেন্টেশন একটি সংক্ষিপ্ত ব্যাখ্যা অথবা অন্যান্য লভ্য পদ্ধতির একটি ওভারভিউ হয়েছে।

Comments

আপনার লিঙ্কিং ফাংশনটিতে আপনি চতুর্থ প্যারামেটের নাম হিসাবে "এনজিমডেল" ব্যবহার করার কোনও কারণ আছে কি? সেই নির্দেশের জন্য কি কেবল জেনেরিক নিয়ামক নয় যা মূলত এনজিএমডেল বৈশিষ্ট্যের সাথে কিছুই করার নেই? (এখনও এখানে কৌনিকটি শিখছি যাতে আমি সম্পূর্ণ ভুল হতে পারি))

— ড্রয় মিলার

"প্রয়োজনীয়: 'এনজিমোডেল'" এর কারণে, লিঙ্কিং ফাংশনের ৪ র্থ পরামিতি হ'ল এনজিএমডেল নির্দেশকের নিয়ামক - যেমন, foo.bar এর নিয়ামক, যা এনজিএমডেলকন্ট্রোলারের একটি উদাহরণ । আপনি যা চান 4 তম প্যারামিটারের নাম রাখতে পারেন। (আমি এটির নাম দেব ngModelCtrl))

— রাজকক

এই কৌশলটি কাস্টম বৈধকরণ বিভাগে ডকস.আঙ্গুলারজেএস.আর.গাইড / সফটওয়্যারগুলিতে নথিযুক্ত ।

— নিখিল ডাবাস

@ মার্ক রাজকক প্রদত্ত ফিডলে, লোড ডেটা - সমস্ত ছোট হাতের উপর ক্লিক করার সময়, আমি প্রত্যাশা করেছি যে মডেলটির মান সমস্ত ক্যাপগুলিতে থাকবে, তবে মডেলের মান খুব কম ছিল। আপনি প্লিজ করতে পারেন কেন এবং কীভাবে মডেলটিকে সর্বদা ক্যাপগুলিতে তৈরি করবেন তা ব্যাখ্যা করুন

— রাজকামাল সুব্রমনিয়ান

@ রাজকামাল, যেহেতু লোডডেটা 2 () $scopeসরাসরি পরিবর্তন করে, ব্যবহারকারী পাঠ্যবক্সের সাথে ইন্টারঅ্যাক্ট না করা পর্যন্ত মডেলটি সেট করা থাকবে ... এই মুহুর্তে, কোনও পার্সার তার পরে মডেল মানকে প্রভাবিত করতে পারে। পার্সার ছাড়াও, আপনি মডেলটির মান রূপান্তর করতে আপনার নিয়ামককে একটি ঘড়ি যুক্ত করতে পারেন।

— রাজকক