قسمت نهم AngularJS: فیلترهای انگولار چگونه تعریف می‌شوند؟

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp
Share on telegram
Share on print
تعریف فیلتر انگولار جی اس

نویسنده:

مرتضی افضلی

Statistics-rafiki

تعداد بازدید:

1475

Calendar-amico (2)

تاریخ انتشار:

16 , بهمن , 1397

Work time-rafiki

زمان تقریبی مطالعه :

5 دقیقه

در قسمت نهم از آموزش انگولار جی اس قصد داریم فیلترهای AngularJs را بررسی کنیم.
پیشنهاد می‌شود قبل از ورود به این قسمت سایر قسمت‌های دوره‌ی انگولار جی اس را مطالعه بفرمایید.
برای فرمت بندی داده‌ها در AngularJS از فیلترها استفاده می‌شود.

فیلترهای AngularJS

فیلترهای انگولار جی اس به شرح زیر می‌باشند:
currency: یک عدد را به فرمت ارز تبدیل می‌کند.
data: تاریخ یک فرمت مشخص‌شده را فرمت می‌کند.
filter : یک زیرمجموعه از یک آرایه را انتخاب کنید.
json: یک شیء را به یک رشته JSON قالب‌بندی کنید.
limitTo: یک آرایه / رشته را به تعداد مشخصی از عناصر / کاراکترها محدود می‌کند.
lowercace: رشته را به حروف کوچک تبدیل می‌کند.
number: عددها را به رشته تبدیل می‌کند.
orderBy: یک آرایه را با یک عبارت اختصاص می‌دهد.
uppercase: رشته را به حروف بزرگ تبدیل می‌کند.

اضافه کردن فیلترها به عبارات

فیلترها را می‌توان به استفاده از علامت | به عبارات متصل کرد، با این کار یک فیلتر به عبارات اضافه می‌شود.
فیلتر uppercase حروف رشته‌ها را به حروف بزرگ تبدیل می‌کند به مثال زیر توجه کنید:

فیلتر lowercase حروف رشته را به حروف کوچک تبدیل می‌کند به مثال زیر توجه کنید:

اضافه کردن فیلترها به دستورالعمل‌ها

فیلترها می‌توانند به دستورالعمل‌ها اضافه شوند، مانند ng-repeat، با استفاده از علامت | می‌توان فیلترها را به دستورالعمل‌ها اضافه کرد به مثال زیر دراین‌باره توجه کنید.
فیلتر orderBy آرایه‌ها را دسته‌بندی می‌کند:

فیلتر currency

همان‌طور که اشاره شد فیلتر currency عدد را به ارز تبدیل می‌کند. در مثال زیر به‌وضوح نمایش داده می‌شود.

فیلتر filter

فیلتر filter زیرمجموعه از آرایه‌ها را انتخاب می‌کند.
فیلتر filter را تنها می‌توان در آرایه‌ها استفاده کرد و آرایه‌ای را که حاوی تنها موارد مطابق است، بازمی‌گرداند.
نمایش تمامی نام‌هایی که شامل حرف “I” می‌باشند:

استفاده از فیلترها در آرایه بر اساس ورودی کاربر

با استفاده از دستورالعمل ng-model در فیلد ورودی، شما می‌توانید مقدار فیلد ورودی را به‌صورت بیان در یک فیلتر استفاده کنید. مثال زیر پیدا کردن کلمه‌ای که شامل حرف واردشده در کادر ورودی باشد را نشان می‌دهد:

مرتب‌سازی آرایه‌ها بر اساس ورودی کاربران

یک مثال ساده در ارتباط با دسته‌بندی داده‌ها را در مثال زیر بیان کرده‌ایم شما با کلیک کردن در هر کادر می‌توانید دسته‌بندی و مرتب شدن آنها را بر اساس حروف الفبا ببینید.

فیلترهای سفارشی

شما می‌توانید فیلترهای خود را با ثبت یک کارخانه فیلتر جدید با ماژول خود ایجاد کنید:

فیلتر myFormat هر رشته دیگری را به حروف بزرگ تبدیل می‌کند. در مثال بالا با استفاده از همین فرمت ساخته‌شده یکی در میان حروف را به حروف بزرگ تبدیل کردیم.

شما با موفقیت به جلسه‌ی نهم از آموزش انگولار رسیدید.

ممنون که با کدپز همراه بودید.

موفق باشید.

مرتضی افضلی

مرتضی افضلی

این روزها دیگر نیاز نیست کلی هزینه‌ی اجاره‌ی مغازه بدهید. با دنیای کسب‌وکار اینترنتی و دیجیتال مارکتینگ می‌توانیم کسب درامد داشته باشیم و من در مجموعه‌ی کدپز در این راه همراه شما هستم.

تا کنون 56 نفر در کدپز ثبت نام کرده اند.

0 پاسخ به "قسمت نهم AngularJS: فیلترهای انگولار چگونه تعریف می‌شوند؟"

ارسال یک پیام

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