تخفیف ویژه هفته کتاب و کتاب خوانی، فرصت یادگیری با 40٪ تخفیف (کد تخفیف: Ketab)
زمان باقی مانده
سبد (0)

تبلیغات

آموزش انگولار-فیلترها

فیلترها می توانند با استفاده از یک کاراکتر خط عمودی به عبارات و دستورات اضافه شوند.


فیلترهای انگولار

از فیلترهای انگولار می توان برای تبدیل داده ها استفاده نمود:

فیلتر توضیحات
currency

فرمت کردن عدد به پول رایج.

filter

گرفتن یک زیرمجموعه از آیتم های یک آرایه.

lowercase

فرمت کردن یک رشته به صورت حروف کوچک. 

orderBy

یک آرایه را به وسیله ی یک عبارت، مرتب می کند. 

uppercase

فرمت کردن یک رشته به صورت حروف بزرگ.


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

یک فیلتر می تواند با استفاده ا یک کاراکتر خط عمودی(|) به یک عبارت اضافه شود.

برای دو مثال بعدی ما از کنترلر person از مقاله ی قبلی، استفاده می کنیم. 

فیلتر uppercase، رشته ها را به صورت حروف بزرگ درمی آورد:

مثالی از انگولار

<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{ lastName | uppercase }}</p>

</div>
خودتان امتحان کنید »

فیلتر lowercase رشته ها را به صورت حروف کوچک درمی آورد:

مثالی از انگولار

<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{ lastName | lowercase }}</p>

</div>
خودتان امتحان کنید »

فیلتر currency

فیلتر currency یک عدد را به صورت ارز(پول رایج) فرمت بندی می کند:

مثالی از انگولار

<div ng-app="myApp" ng-controller="costCtrl">

<input type="number" ng-model="quantity">
<input type="number" ng-model="price">

<p>Total = {{ (quantity * price) | currency }}</p>

</div>
خودتان امتحان کنید »

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

یک فیلتر می تواند با استفاده از یک کاراکتر خط عمودی(|) به یک دستور اضافه شود.

فیلتر orderBy یک آرایه را به وسیله ی یک عبارت، مرتب می کند:

مثالی از انگولار

<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

<div>
خودتان امتحان کنید »

فیلتر کردن ورودی

یک فیلتر که برای ورودی ها در نظر گرفته شده است، می تواند به وسیله ی یک کاراکتر خط عمودی(|) به یک دستور اضافه شود و سپس فیلتر مورد نظر با یک علامت دو نقطه(:) و سپس نام مدل دنبال شود.

The filter filter selects a subset of an array:

مثالی از انگولار

<div ng-app="myApp" ng-controller="namesCtrl">

<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

</div>
خودتان امتحان کنید »

دیدگاه‌ها  

+2 # سحر مهربان 1395-09-03 12:48
خسته نباشید
خودتان امتحان کنید را با نسخه W3SCHOOL تطبیق دادم
بخش اضافه کردن فیلتر ها به دستوران باید تعدادی نام داشته باشد که شما اصلا لحاظ نکردید به همین دلیل کد خام نمایش پیدتا می کند به جای خروجی اصلی
www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_orderby
در قسمت بعد هم بین نام ها حروفی که در تکست باکس مینویسم اگر تطبیق داشته باشد باید نام سهر اضافه شود اما اینجا فقط کد خام ایجاد میشود لطفا رسیدگی کنید
ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1395-09-04 08:35
سلام. ممنونم از شما. موارد مذکور اصلاح شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # Guest 1395-03-22 15:19
خودتان امتحان کنیدا مشکل دارن. فایل js کنترلر لود نمیشه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
-5 # امیر پهلوان صادق 1395-03-24 07:53
سلام
احتمالا بدلیل مشکل اینترنت و یا استفاده از فیلتر شکن، فایل ها بدرستی لود نشده است. بنده تست کردم مشکلی وجود نداشت.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+8 # ali bayervand 1394-09-26 18:13
با سلام تمام لینک های "خودتان امتحان کنید" مشکل دارند
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
-8 # hamid fa 1394-09-26 20:25
با سلام به شما دوست عزیز و گرامی

لینک های خودتان امتحان کنید
در آموزش انگولار رو چک کردیم مشکلی ندارند

با احترام
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی