دوره آموزشی AngularJS به زبان فارسی - بخش پنجم

دوره آموزشی AngularJS به زبان فارسی - بخش پنجم

بسم الله الرحمن الرحیم

 

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

 

مشاهده تمامی آموزش های دوره AngularJS

دوره آموزش AngularJS

بخش پنجم

 

 

AngularJS Filters

Filter ها می توانند به رهنمود ها و عبارت ها با استفاده از یک کاراکتر pipe ( | ) اضافه شوند.
فیلترهای AngularJS می توانند شکل داده ها را تغییر دهند:

 

Filter Description
currency Format a number to a currency format.
filter Select a subset of items from an array.
lowercase Format a string to lower case.
orderBy Orders an array by an expression.
uppercase Format a string to upper case.

 

 

 اضافه کردن Filter ها به Expression ها

در دو مثال بعدی ما از personController که در مقاله قبل از آن استفاده کردیم بهره می بریم.
فیلتر uppercase همانطور که از نام آن مشخص است فرمت رشته ها (string) به حروف بزرگ تغییر می دهد.

 

 

 

 

 

 

بسم الله الرحمن الرحیم

 

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

 

مشاهده تمامی آموزش های دوره AngularJS

دوره آموزش AngularJS

بخش پنجم

 

 

AngularJS Filters

Filter ها می توانند به رهنمود ها و عبارت ها با استفاده از یک کاراکتر pipe ( | ) اضافه شوند.
فیلترهای AngularJS می توانند شکل داده ها را تغییر دهند:

 

Filter Description
currency Format a number to a currency format.
filter Select a subset of items from an array.
lowercase Format a string to lower case.
orderBy Orders an array by an expression.
uppercase Format a string to upper case.

 

 

 اضافه کردن Filter ها به Expression ها

در دو مثال بعدی ما از personController که در مقاله قبل از آن استفاده کردیم بهره می بریم.
فیلتر uppercase همانطور که از نام آن مشخص است فرمت رشته ها (string) به حروف بزرگ تغییر می دهد.

 

 <div ng-app="" ng-controller="personController">

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

</div> 

 

فیلتر lowercase برعکس فیلتر uppercase عبارت ها در کاراکترهای کوچک نمایش می دهد.

 

 <div ng-app="" ng-controller="personController">

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

</div> 

 

The currency Filter

این فیلتر برای نمایش اعداد در واحدهای پول می باشد.

 

 <div ng-app="" ng-controller="costController">

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

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

</div> 

 

اضافه کردن Filter ها به رهنمودها

فیلتر orderBy یک آرایه را براساس یک عبارت (شرط و نحوه مرتب سازی) مرتب می کند.

 

 

 <div ng-app="" ng-controller="namesController">

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

<div> 

 

Filtering Input

یک فیلتر input می تواند به یک رهنمود به وسیله کاراکتر pipe ( | ) اضافه شود و همچنین با یک کولن ( , ) و یک مدل دنبال شود.
 

 

 <div ng-app="" ng-controller="namesController">

<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>

مشاهده تمامی آموزش های دوره AngularJS

نظرات یا سوالات خودرا با ما درمیان بگذارید

0912 097 5516 :شماره تماس
0713 625 1757 :شماره تماس