دوره آموزشی 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) به حروف بزرگ تغییر می دهد.
<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>