در AngularJs فیلتر ها برای فرمت کردن داده های قابل نمایش در view ها استفاده می شوند. به طور مثال وقتی بخواهیم عنوانی انگلیسی را بوسیله حروف بزرگ نمایش دهیم و یا مثال هایی از این دست.

برای استفاده و فراخوانی یک فیلتر روی یک مقدار خاص از کاراکتر | (pipe) در درون کاراکتر های data binding ({{}}) استفاده می شود.

مثال زنده آن به صورت زیر است:

Basic AngularJs Filters | Farid Bekran

در تکه کد بالا lowercase نام یکی از چندین فیلتر موجود در خود AngularJs است. تعداد قابل توجهی فیلتر به همراه این کتابخانه در اختیار برنامه نویس قرار می گیرد. با توجه به این که آموزش نحوه استفاده از تمامی این فیلتر ها از عهده این مطلب خارج است، به صورت اجمالی لیست این فیلتر ها ذکر می شود.

یکی از امکانات جالب و حیاتی برای برنامه نویسان پروژه های بزرگ ایجاد فیلتر هایی اختصاصی شده با نیازهای خاص است.

برای ساختن فیلتر، یک راه خوب (best practice) این است که آن را در module مربوط به خودش ایجاد کنیم تا بتوانیم در module ها مختلف از آن استفاده کنیم.

module مربوط به تعریف فیلتر

 module اصلی برنامه

 و به صورت زنده:

JS Bin

در تکه کد بالا ما ابتدا یک module برای فیلتر مورد نظرمان ایجاد کردیم و در آن module فیلتر را تعریف کردیم. سپس یک module اصلی ساختیم که module فیلتر را نیاز داشت (مطلب مربوط به module را مطالعه نمایید) .

خروجی دستور ساخت فیلتر یک function است که در واقع روی مقادیر ما اجرا خواهد شد. روش استفاده از این function توسط AngularJs بسیار ساده است: به ترتیبی که شما ذکر کرده اید به صورت زنجیر وار تمام فیلتر ها را روی مقدار مربوطه اجرا می کند. به طوری که خروجی فیلتر اول به عنوان ورودی فیلتر دوم پاس می شود و الی آخر.

اگر به کد بالا دقت کنید متوجه می شوید که فیلتری که ما ساختیم کار بزرگ کردن اولین حرف یک رشته را انجام می دهد. برای این که اطمینان داشته باشیم تمام حروف دیگر آن رشته کوچک باشند ابتدا فیلتر lowercase را روی آن اعمال می کنیم سپس فیلتر خودمان را.

نکته بسیار مهمی که در چند خط قبل هم ذکر کردم را دوباره تکرار می کنم. همیشه به یاد داشته باشید که فیلتر ها قابلیت زنجیره شدن در اجرا را دارند و ترتیب نیز در فراخوانی آن ها مهم است. 

ایجاد فیلتر های اختصاصی در موقعیت های متفاوتی مورد استفاده قرار می گیرند. به طور مثال اعتبار سنجی اختصاصی در فرم های HTML که به طور مفصل در آینده بحث خواهند شد.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *