تعریف فیلتر انگولار جی اس

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

در قسمت نهم از اموزش انگولار جی اس قصد داریم فیلتر های 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 هر رشته دیگری را به حروف بزرگ تبدیل می کند. در مثال بالا با استفاده از همین فرمت ساخته شده یکی در میان حروف را به حروف بزرگ تبدیل کردیم.

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

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

موفق باشید.

برچسب ها : angularjs فیلتر، اموزش انگولار

دیدگاه تازه ای بنویسید