سبد (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>
خودتان امتحان کنید »
نوشته شده توسط احسان عباسی
بازدید: 9667

در میان شش هزار مطلب آموزشی منتشر شده در بیاموز، جستجو نمایید ...

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