مرشحات AngularJS ومرشح AngularJS المخصص مع مثال
جيمس هارتمان
⚡ ملخص ذكي
تُنسّق خاصية "الفلتر" في AngularJS قيمة التعبير لعرضها دون تغيير البيانات الأساسية. تشمل الفلاتر المدمجة التعامل مع الأحرف الكبيرة والصغيرة، والأرقام، والعملات، وبيانات JSON، بينما يتولى الفلتر المخصص معالجة أي قاعدة تنسيق لا يوفرها إطار العمل.
ما هو عامل التصفية في AngularJS؟
A تصفية في AngularJS تساعد هذه الخاصية في تنسيق قيمة التعبير لعرضها للمستخدم دون تغيير القيمة الأصلية. على سبيل المثال، إذا كنت ترغب في عرض سلسلة نصية بأحرف صغيرة أو كبيرة، يمكنك فعل ذلك باستخدام عوامل التصفية. تُعيد عوامل التصفية المدمجة، مثل "lowercase" و"uppercase"، السلسلة النصية بالحالة المطلوبة، كما توجد عوامل تصفية أخرى للأرقام والعملات وبيانات JSON.
⚠️ ملاحظة حول الإصدار: وصل دعم AngularJS (الإصدار 1.x) إلى نهايته في 31 ديسمبر 2021، ولم يعد يتلقى أي تحديثات أمنية. كل ما يلي لا يزال صحيحًا لصيانة تطبيقات AngularJS الحالية؛ في Angular الحديث، يتم القيام بنفس الدور بواسطة أنبوب (pipe).
تُطبَّق المرشحات في العرض باستخدام رمز الأنبوب (|). قبل استعراض كل مرشح على حدة، من المفيد معرفة سبب كتابة مرشحك الخاص.
مرشح الأحرف الصغيرة في AngularJS
يقوم هذا المرشح بأخذ سلسلة نصية وعرض جميع أحرفها بأحرف صغيرة.
في الأسفل، يقوم المتحكم بإرسال سلسلة نصية إلى العرض عبر كائن النطاق، ويقوم عامل التصفية بتحويلها إلى أحرف صغيرة.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <h1> Guru99 Global Event</h1> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <div ng-app="DemoApp" ng-controller="DemoController"> Tutorial Name : <input type="text" ng-model="tutorialName"><br> This tutorial is {{tutorialName | lowercase}} </div> <script> var app = angular.module('DemoApp', []); app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialName = "Angular JS"; }]); </script> </body> </html>
Code تفسير
- يتم وضع السلسلة النصية المختلطة الأحرف "Angular JS" في متغير عضو يسمى
tutorialNameعلى نطاق الكائن. - يشير رمز التصفية (|) إلى المخرج المراد تحويله، و
lowercaseتقوم الكلمة المفتاحية بتطبيق عامل التصفية المدمج الذي يحول السلسلة بأكملها إلى أحرف صغيرة.
⚠️ تم تطبيق التصحيحات على جميع القوائم. جميع الأمثلة الأصلية الستة تشترك في ثلاثة عيوب. chrset="UTF 8" ليست سمة أو ترميزًا صالحًا، وهي الآن charset="UTF-8". angular-route.js محمل قبل angular.min.jsتم حذف هذا الجزء، الذي يُسبب خطأً في الوحدة، والذي لم يُستخدم مطلقًا، وكذلك مرجع jQuery غير المُستخدم. كما ادّعى النص أن القيمة هي "AngularJS" بينما كان الكود يُحددها "Angular JS"؛ والآن يتطابق النص.
الإخراج:
يتم عرض السلسلة النصية المختلطة الأحرف بأحرف صغيرة بالكامل. ويعمل التحويل العكسي بنفس الطريقة.
مرشح الأحرف الكبيرة في AngularJS
هذا الفلتر هو النظير لفلتر الأحرف الصغيرة، حيث يعرض كل حرف بأحرف كبيرة.
في الأسفل، يقوم المتحكم بإرسال سلسلة نصية إلى العرض عبر كائن النطاق، ويقوم عامل التصفية بتحويلها إلى أحرف كبيرة.
<!-- The head and library references are unchanged from the previous example --> <div ng-app="DemoApp" ng-controller="DemoController"> Tutorial Name : <input type="text" ng-model="tutorialName"><br> This tutorial is {{tutorialName | uppercase}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialName = "Angular JS"; }]); </script>
Code تفسير
- يتم وضع السلسلة النصية المختلطة الأحرف "Angular JS" في
tutorialNameومرفقة بكائن النطاق. - يتبع رمز التصفية (|)
uppercaseالكلمة المفتاحية، لذلك يقوم المرشح المدمج بتحويل السلسلة بأكملها إلى أحرف كبيرة.
⚠️ تصحيح: قدّم النص الأصلي هذا القسم على أنه "مثال على فلتر الأحرف الكبيرة في AngularJS مع خيار الأحرف الصغيرة"، وهذا خطأ محض. يُوضّح هذا القسم فلتر الأحرف الكبيرة، بينما لا يحتوي AngularJS على فلتر للأحرف الكبيرة أصلاً - إذ يتطلب تحويل الحرف الأول فقط إلى حرف كبير فلترًا مخصصًا، وهو ما توضحه الأقسام اللاحقة.
الإخراج:
لا تتطلب عوامل تصفية الحالة أي وسيطات. يوضح عامل التصفية التالي كيفية تمرير النقطتين الرأسيتين لمعامل إلى عامل تصفية.
تصفية الأرقام في AngularJS
يقوم هذا الفلتر بتنسيق الرقم ويمكنه تحديد عدد المنازل العشرية المعروضة.
يستخدم المثال أدناه مُرشِّح الأرقام لعرض قيمة مُقتصرة على منزلتين عشريتين. يُرسل المُتحكِّم الرقم إلى العرض عبر كائن النطاق، ويتم تطبيق المُرشِّح في العرض.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorialID is {{tutorialID | number:2}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialID = 3.565656; }]); </script>
Code تفسير
- يتم وضع رقم يحتوي على العديد من المنازل العشرية في متغير عضو يسمى
tutorialIDومرفقة بكائن النطاق. - يتبع رمز التصفية (|)
number:2تُستخدم النقطتان لتمرير وسيط، بينما يُستخدم الرقم 2 لتعيين منزلتين عشريتين. يتم تقريب القيمة للعرض، لذا يظهر العدد 3.565656 على أنه 3.57 بينما يحتفظ النطاق بالعدد الكامل.
الإخراج:
لا يكفي في كثير من الأحيان تنسيق رقم عادي عندما تمثل القيمة نقودًا، وهو ما تتعامل معه المرشحات التالية.
تصفية العملة في AngularJS
يقوم هذا المرشح بتنسيق رقم كقيمة عملة، ويسبقه برمز عملة مثل $.
في المثال أدناه، يقوم المتحكم بإرسال رقم إلى العرض عبر كائن النطاق، ويتم تطبيق عامل تصفية العملة في العرض.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial Price is {{tutorialprice | currency}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialprice = 20.56; }]); </script>
Code تفسير
- يتم وضع رقم في متغير عضو يسمى
tutorialpriceومرفقة بكائن النطاق. - يتبع رمز التصفية (|)
currencyمنقي.
⚠️ تصحيح: ادّعى النص الأصلي أن العملة "تعتمد على إعدادات اللغة المُطبقة على الجهاز". هذا غير صحيح. يستخدم AngularJS اللغة المُضمّنة مع المكتبة، وهي en-US افتراضيًا، لذا فإن الرمز هو $ بغض النظر عن نظام التشغيل. حمّل الملف المُطابق. angular-locale_*.js قم بتمرير الملف، أو مرر الرمز مباشرة: {{tutorialprice | currency:"£"}}.
الإخراج:
السلاسل والأرقام عبارة عن قيم بسيطة. أما المرشح المدمج الأخير فيتعامل مع الكائنات الكاملة.
مرشح JSON في AngularJS
يقوم هذا المرشح بتحويل الكائن إلى تنسيق JSON السلسلة النصية، وهي مفيدة لفحص بيانات النطاق أثناء التطوير.
في المثال أدناه، يقوم المتحكم بإرسال كائن إلى العرض عبر كائن النطاق، ويتم تطبيق عامل تصفية JSON في العرض.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial is {{tutorial | json}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorial = { TutorialID: 12, tutorialName: "Angular" }; }]); </script>
Code تفسير
- شيء يحمل
TutorialID: 12وtutorialName: "Angular"يتم وضعها في متغير عضو يسمىtutorialومرفقة بكائن النطاق. - يتبع رمز التصفية (|)
jsonفلتر، يقوم بتحويل الكائن إلى نص JSON مُنسق.
⚠️ تصحيح: وصف النص الأصلي هذه القيمة بأنها "رقم" و"سلسلة نصية من نوع JSON". لكنها ليست كذلك. إنها... Javaكائن البرنامج النصي، ومرشح JSON هو ما يحوله إلى سلسلة JSON للعرض.
الإخراج:
تغطي هذه المرشحات الخمسة الحالات الشائعة. إذا لم يُنتج أي منها المخرجات المطلوبة، فعليك كتابة مرشحك الخاص.
AngularJS مرشح مخصص
في بعض الأحيان، لا تستطيع المرشحات المدمجة في AngularJS تلبية متطلبات تنسيق المخرجات. في هذه الحالة، يمكن إنشاء مرشح مخصص في AngularJS، والذي يُعيد المخرجات بالشكل المطلوب.
يتم تسجيل مرشح مخصص في وحدة نمطية، ثم يعمل تمامًا مثل المرشح المدمج. تتناول الأقسام التالية المرشحات القياسية أولًا، نظرًا لأن المرشح المخصص يستخدم نفس صيغة الأنابيب، ثم توضح كيفية إنشاء مرشح مخصص.
كيفية إنشاء مرشح مخصص في AngularJS
في المثال أدناه، يتم تمرير سلسلة نصية من مراقب يمكن عرضها عبر كائن النطاق، ولكن لا ينبغي عرضها كما هي. فلتر مخصص في AngularJS يُلحق سلسلة نصية أخرى ويعرض النتيجة النهائية.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial is {{tutorial | Demofilter}} </div> <script> var app = angular.module('DemoApp', []); // The factory runs once; the function it returns runs on every value app.filter('Demofilter', function() { return function(input) { return input + " Tutorial"; }; }); app.controller('DemoController', ['$scope', function($scope) { $scope.tutorial = "Angular"; }]); </script>
Code تفسير
- يتم وضع السلسلة "Angular" في متغير عضو يسمى
tutorialومرفقة بكائن النطاق. - يوفر AngularJS
filterطريقة التسجيل المستخدمة لإنشاء فلتر مخصص. 'Demofilter' هو الاسم الذي أُطلق عليه، وهذا الاسم هو ما تشير إليه طريقة العرض. - هذا هو الشكل القياسي لمرشح مخصص: الدالة المسجلة هي مصنع تقوم هذه الدالة بإرجاع الدالة التي تُنفذ العمل. تستقبل هذه الدالة القيمة التي يتم تصفيتها كمعاملها الأول، ثم تُرجع النتيجة - هنا، المدخلات مع إضافة كلمة "Tutorial".
- يتم تطبيق عامل التصفية في العرض باستخدام نفس صيغة الأنابيب المستخدمة في أي عامل تصفية مدمج.
؟؟؟؟ تلميح: تُكتب أسماء المرشحات عادةً بأحرف صغيرة أو بنمط CamelCase. يعمل اسم "Demofilter"، لكن اسمًا مثل appendTutorial يسهل قراءته ويتجنب التعارض مع اسم مدمج.
الإخراج:
تمت إضافة كلمة "Tutorial" إلى السلسلة النصية التي تم تمريرها في tutorial متغير. يقوم هذا المرشح دائمًا بإلحاق نفس النص، والذي يمكن ضبطه في القسم التالي.
كيفية تمرير الوسائط إلى مرشح مخصص
يقوم الفلتر المذكور أعلاه بتحديد النص الذي يُضيفه بشكل ثابت، لذا فهو لا يستطيع القيام إلا بوظيفة واحدة. أما الفلاتر المدمجة مثل... number:2 يمكن قبول وسيط بعد النقطتين، ويمكن للمرشح المخصص أيضًا قبول وسيط: كل معلمة بعد الأولى ترتبط بوسيط مفصول بنقطتين في العرض.
تتضمن العملية ثلاث خطوات: إضافة المعلمات بعد input في الدالة المُعادة، قم بتوفير قيمة افتراضية لأي شيء اختياري حتى يظل عامل التصفية يعمل عند حذف الوسيط، ثم قم بتمرير الوسائط في العرض مفصولة بنقطتين رأسيتين.
app.filter('appendText', function() { return function(input, suffix, separator) { if (!input) { return input; } // guard against undefined separator = typeof separator === 'undefined' ? ' ' : separator; return input + separator + suffix; }; });
ثم يصبح العرض كما يلي، حيث تصبح كلمة "Tutorial" suffix وتصبح الواصلة separator.
{{tutorial | appendText:"Tutorial"}} // Angular Tutorial
{{tutorial | appendText:"Tutorial":" - "}} // Angular - Tutorial
هناك تفصيلان يسهل إغفالهما. الوسائط عبارة عن تعابير AngularJS، لذا يجب وضع سلسلة نصية حرفية بين علامتي اقتباس، بينما تُقرأ الكلمة غير المقتبسة كخاصية نطاق. كما أن المرشحات تتسلسل، حيث يستقبل كل منها ناتج المرشح السابق. {{tutorial | appendText:"Tutorial" | uppercase}}.
⚠️ : تحذير حافظ على نقاء الفلتر - أي نفس المخرجات لنفس المدخلات، دون أي تغييرات خارجية. يقوم AngularJS بتخزين الفلتر النقي مؤقتًا، ويعيد تشغيله فقط عند تغيير المدخلات. يجب تمييز الفلتر الذي يقرأ الساعة أو يُعدّل خدمةً ما. $stateful، مما يؤدي إلى تعطيل التخزين المؤقت وتشغيل المرشح في كل دورة هضم، وهو سبب شائع لبطء الصفحات.
لا تقتصر المرشحات على القوالب فقط. يمكن استدعاء المرشح نفسه من Javaالنص البرمجي، كما هو موضح أدناه.
كيفية استخدام عوامل التصفية في وحدة تحكم باستخدام خدمة $filter
يُعد تطبيق عامل تصفية في العرض هو الحالة الشائعة، ولكن في بعض الأحيان تكون القيمة المُحوّلة مطلوبة داخل وحدة التحكم، على سبيل المثال قبل إرسال البيانات إلى الخادم. يُتيح AngularJS الوصول إلى جميع عوامل التصفية المُسجّلة، سواءً كانت مُدمجة أو مُخصصة، من خلال $filter الخدمة. قم بحقنها، واستدعها باستخدام اسم عامل التصفية لاسترداد وظيفة عامل التصفية، ثم استدعِها باستخدام القيمة وأي وسيطات.
app.controller('DemoController', ['$scope', '$filter', function($scope, $filter) { $scope.tutorial = "Angular"; // Built-in filters, called from JavaScript $scope.shouted = $filter('uppercase')($scope.tutorial); // "ANGULAR" $scope.price = $filter('currency')(20.56); // "$20.56" // A custom filter works exactly the same way $scope.full = $filter('appendText')($scope.tutorial, "Tutorial"); }]);
يوجد شكل مختصر أيضاً: إدخال اسم المرشح متبوعاً بـ Filter، مثل uppercaseFilterتوفر هذه الطريقة وظيفة التصفية مباشرةً ويمكن استدعاؤها فورًا. كلا الشكلين يؤديان إلى نفس الوظيفة، لذا فإن الاختيار يتعلق بأسلوب الكتابة.
يُستخدم هذا الأسلوب مرتين بشكل متكرر. الأولى هي إعداد حمولة البيانات: حيث يجب عادةً أن تصل البيانات إلى واجهة برمجة التطبيقات (API) بنمط ثابت، و $filter('date')(value, 'yyyy-MM-dd') ينتج ذلك دون المساس بالقيمة المرتبطة بالنموذج. أما الثاني فهو تضييق نطاق المجموعة بمجرد وجودها في وحدة التحكم، بدلاً من تركها orderBy في نانوغرام تكرار تعبير يُعاد تشغيله في كل عملية هضم.
تظل المرشحات التي يتم حقنها بهذه الطريقة مسجلة في الوحدة، لذلك يجب تعريف مرشح مخصص باستخدام app.filter قبل أن يسأل أي متحكم $filter لذلك. وإلا فإن AngularJS سيُظهر خطأً يتعلق بمزود خدمة غير معروف.
استدعاء مرشح في Javaيختلف البرنامج النصي عن القالب في جانب مهم: تُحسب النتيجة مرة واحدة وتُخزن في النطاق بدلاً من إعادة حسابها في كل عملية تجزئة. وهذا ما يجعله الخيار الأسرع لقيمة نادراً ما تتغير، والخيار الخاطئ لقيمة يجب أن تتغير. tracإدخال المستخدم k.
