الوقوف في AngularJs وتفاصيل ملفات المرشح (filter)

مرشح (filter) كما يُقال، وظيفته هي استقبال مدخل، معالجته عن طريق قاعدة معينة، ثم إرجاع النتيجة المعالجة. يستخدم بشكل رئيسي في تنسيق البيانات، مثل الحصول على مجموعة فرعية من مجموعة، ترتيب عناصر المجموعة، وما إلى ذلك. يحتوي ng على بعض المرشحات، وهي: currency (المال)、date (التاريخ)、filter (التطابق بالعنصر)、json (ت формате json object)、limitTo (محدودية العدد)、lowercase (الصغيرة)、uppercase (كبيرة)、number (رقم)、orderBy (ترتيب). يوجد تسع منها. بالإضافة إلى ذلك، يمكنك إنشاء مرشحات مخصصة، مما يجعله قويًا جدًا، يمكنه تلبية أي متطلبات معالجة البيانات.

محتويات المرشح بسيطة جدًا، طالما فهمت كيفية استخدام المرشحات المدمجة وكيفية تعريف مرشح خاص بك، فإن ذلك كافٍ ~ تعلمت اليوم النظام الكامل، وسأقدم لك شرحًا فيما يلي.

طريقتان لاستخدام مرشح

1. استخدام مرشح في النمذجة

يمكننا استخدام مرشح داخل {{}} مباشرة، وفرزته بعدها باستخدام |، وفقًا للنحو التالي:

{{ expression | filter }}

يمكن استخدام متعدد مرشحات معًا، حيث سيكون خروج مرشح واحد مدخلًا للمرشح التالي (لم يكن من الغريب أن يكون هذا الشكل مشابهًا جدًا لخط الأنابيب...)

{{ expression | filter1 | filter2 | ... }}

يمكن للمرشح استقبال معلمات، وتفصل المعلمات بـ :، مثلما يلي:}}

{{ expression | filter:argument1:argument2:... }}

بالإضافة إلى تشكيل البيانات في {{}}، يمكننا أيضًا استخدام المرشحات في التعليمات البرمجية، على سبيل المثال، قبل معالجة مصفوفة array، يمكننا معالجتها ثم إعادة تكرارها:

<span ng-repeat="a in array | filter ">

2. استخدام المرشحات في controller وservice

يمكننا أيضًا استخدام المرشحات في كود js الخاص بنا، بطريقة معروفة لنا وهي التدفق الاعتمادي، على سبيل المثال، إذا كنت أريد استخدام مرشح currency في controller، يجب فقط إدراجه في هذا controller، وكما يلي الكود:

app.controller('testC',function($scope,currencyFilter){
 $scope.num = currencyFilter(123534); 
};

يمكنك استخدام {{num}} في النموذج لتسجيل الخروج مباشرة $123,534.00! في الخدمات، يتم استخدام المرشحات بنفس الطريقة.

قد تكون لديك شكوك، إذا كنت أريد استخدام عدة مرشحات في controller، هل يجب أن أقوم بتحميلها واحدة تلو الأخرى؟ هذا ليس مجديًا جدًا؟ لا تقلق، ng يقدم خدمة $filter لتطبيق المرشحات المطلوبة، تحتاج فقط إلى تحميل $filter، واستخدامها كالتالي:

app.controller('testC',function($scope,$filter){
 $scope.num = $filter('currency')(123534);
　　$scope.date = $filter('date')(new Date()); 
};

يمكن تحقيق نفس التأثير. الفائدة هي أن يمكنك استخدام مختلف المرشحات بسهولة.

مرشحات مدمجة في ng

يحتوي ng على تسعة مرشحات، والاستخدام بسيط جدًا، يمكنك قراءة الوثائق لفهمها. ولكن من أجل عدم الرجوع إلى الوثائق في المستقبل، سأقوم هنا بتسجيل مفصل.

1. معالجة العملات

يمكن استخدام currency لتشكيل الأرقام كعملات، والمحفوظة هي رمز الدولار، يمكنك إدخال الرمز المطلوب، على سبيل المثال، قمت بإدخال العملة الصينية:

{{num | currency : '￥'}}

2. تشكيل التاريخ (تشكيل التواريخ)

قدرة js الأصلية على تشكيل تواريخ محدودة، يقدم ng مرشح date بشكل أساسي يلبي متطلبات تشكيل التواريخ العامة. الاستخدام كالتالي:

{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}

المعلمة تُستخدم لتعريف النسق المطلوب،y M d h m s E تشير إلى السنة الشهر اليوم الساعة الدقيقة الثانية اليوم من الأسبوع، يمكنك تجميعها بحرية. يمكنك أيضًا استخدام عدد مختلف لتقيد عدد الأرقام الم格式ة. بالإضافة إلى ذلك، يمكن استخدام سلاسل الوصفية المحددة، مثل 'shortTime' ستجعل الوقت يُ格式ز إلى شكل 12:05 pm. يقدم ng ثماني سلاسل وصفية، أعتقد أن هذا يبدو زائداً عن الحاجة، يمكنني بسهولة تجميع النسق الذي أريد بنفسي، وأنا لا أريد تذكر الكثير من الكلمات~

3. filter (تطابق النتوء)

هذا المسمى filter (لا يمكنني سوى القول إنه يُسبب التشويه -！） يستخدم لمعالجة مجموعة، ثم يمكنه فرز العناصر التي تحتوي على نتوء معين، وإرجاعها كنوع فرعي. يمكن أن يكون مجموعة من الأسماء أو مجموعة من الأجسام. إذا كانت مجموعة الأجسام، يمكنها التطابق مع قيمة الخاصية. تُستخدم المعلمة لتعريف قاعدة التطابق للنتوء. سأعطيك مثالًا على استخدام المعلمة، استخدمت بعض الأطفال المعروفين الآن لإنشاء مجموعة:

$scope.childrenArray = [
  {name:'kimi',age:3},
  {name:'cindy',age:4},
  {name:'anglar',age:4},
  {name:'shitou',age:6},
  {name:'tiantian',age:5}
 ;
$scope.func = function(e){return e.age>4;}

{{ childrenArray | filter : 'a' }} //المعلمة هي دالة، تُحدد العودة إذا كان يحتوي قيمة الخاصية على a
{{ childrenArray | filter : 4 }} //المعلمة هي دالة، تُحدد العودة إذا كان يحتوي قيمة الخاصية على 4
{{ childrenArray | filter : {name : 'i'} }} //المعلمة هي دالة، تُحدد العودة إذا كان يحتوي اسم الخاصية على i
{{childrenArray | filter : func }} //المعلمة هي دالة، تُحدد العودة إذا كان العمر أكبر من 4

4. json (تصدير جسم JSON)

متصفح JSON يمكنه تحويل جسم JavaScript إلى سلسلة JSON دون أي معلمات. ما هو استخدامه؟ عادةً لا أقوم بإخراج سلسلة JSON على الصفحة، يقول الموقع الرسمي أن يمكن استخدامه للتحقق من صحة البرنامج، نعم، خيار جيد. أو يمكن استخدامه أيضًا في JavaScript، ويكون له نفس دور كما نعرفه JSON.stringify(). الاستخدام بسيط جدًا:

{{ jsonTest | json}}

5. limitTo(تحديد طول مجموعة أو سلسلة)

يستخدم مرشح limitTo لقطع مجموعة أو سلسلة، يستقبل معاملًا لتعريف طول القطع، إذا كان المعامل سالبًا، يتم القطع من نهاية المجموعة. أعتقد أن هذا المرشح ضعيف قليلاً، أولاً يمكنه فقط قطع من بداية المجموعة أو النهاية، ثانيًا يمكن أن يحل محلها دالة الأصلية في js، لنرى كيفية استخدامه:

{{ childrenArray | limitTo : 2 }} //سيتم عرض两项 الأولى من المجموعة

6. lowercase(صغيرة)

تحويل البيانات إلى صغيرة. بسيط جدًا، لا تحتاج إلى شرح. هو مرشح ضعيف جدًا، وليس له معامل، يمكنه تحويل الكل إلى صغيرة فقط، وليس من الممكن تحديد الحرف. لا أريد حتى كتابة كيفية استخدامه.

7. uppercase(كبير الحروف)

كما ذكرت سابقًا.

8. number(تشكيل الرقم)

مرشح number يمكن إضافة فاصلة الألف إلى الرقم، مثل هذا، 123,456,789. يمكن أيضًا تحديد عدد الأرقام الصغيرة التي يتم حفظها من النوع float:

{{ num | number : 2 }}

9. orderBy(ترتيب)

مرشح orderBy يمكن ترتيب العناصر في مجموعة، يستقبل معاملًا لتعريف قاعدة الترتيب، يمكن أن يكون المعامل سلسلة، تعرض ترتيبًا بناءً على اسم الخاصية. يمكن أن يكون دالة، تعريف خاصية الترتيب. يمكن أن يكون مجموعة، ترتيبًا بناءً على القيم في المجموعة (إذا كانت القيم في الأول متطابقة، يتم الترتيب بناءً على الثاني). دعونا نأخذ مثالًا على مجموعة الأطفال

<div>{{ childrenArray | orderBy : 'age' }}</div>  //يتم ترتيبها بناءً على قيمة age، إذا كانت -age، يتم ترتيبها بشكل عكسي
<div>{{ childrenArray | orderBy : orderFunc }}</div> //يتم ترتيبها بناءً على القيمة التي تعود بها الدالة
<div>{{ childrenArray | orderBy : ['age','name'] }}</div> //إذا كانت القيم في age متطابقة، يتم ترتيبها بناءً على name

المرشحات المدمجة قد تم شرحها، لدرجة أنني كنت على وشك النوم... كما ترون، المرشحات المدمجة في ng ليست قوية تمامًا، في الواقع العديد منها ليست قوية. للحاجة الشخصية المحددة، نحتاج إلى تعريف مرشحاتنا الخاصة. دعونا نرى كيف يمكننا تعريف مرشح مخصص.

مرشح مخصص

طريقة تعريف المرشحات مخصصة بسيطة، باستخدام طريقة filter في module، عودة دالة، وتلقي القيمة المدخلة، وتقديم النتيجة المعالجة. لا نكثب في الكلام، دعونا نكتب واحدة لنرى. على سبيل المثال، إذا كنت بحاجة إلى مرشح يمكنه العودة إلى العناصر الموجودة في العدد الذكور من المجموعة، فإن الكود التالي هو:

app.filter('odditems',function(){
 return function(inputArray){
  var array = [];
  for(var i=0;i<inputArray.length;i++){
   if(i%2!==0){
    array.push(inputArray[i]);
   };
  };
  return array;
 };
});

التنسيق كذلك، منطق معالجتك مكتوب في الدالة المغلقة الداخلية. يمكنك أيضًا أن تجعل مرشحك يستقبل معاملات، وتحدد المعاملات في الدالة التي تعود، كمعامل ثاني، أو يمكن أن تكون هناك معاملات أكثر.

هذه هي معلومات الأساسيات لمرشحات، ما زلت أقول نفس الكلمة، أكثر ما تحتاجه هو اختبار المشروع الحقيقي. إذاً، قبل أن يأتي المشروع، دعونا نحضّر الأساسيات~

هذا هو نهاية محتويات هذا المقال، آمل أن تكون قد ساعدتكم في التعلم، وأتمنى أن تدعموا كتالوج التدريب.

بيان: محتويات هذا المقال تم جمعها من الإنترنت، وتعود حقوق الملكية إلى المالك الأصلي، تم جمع المحتويات من قبل المستخدمين عبر الإنترنت بشكل متعاوني وتحميلها بشكل مستقل، ويتمتع هذا الموقع بلا ملكية، ولا يتم تعديل المحتويات بشكل يدوي، ولا يتحمل الموقع أي مسؤولية قانونية متعلقة بذلك. إذا رأيت محتوى يشتبه في انتهاك حقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # بـ @) لإبلاغنا، وقدم الدليل على الدليل، وسنقوم بإزالة المحتوى المزعوم عن حقوق النسخ فور التحقق منه.