جلسه نهم – فیلترها در انگولار جی اس

فیلترها به انگولار جی اس، امکان قالب بندی داده ها را اضافه می کند. فیلترهای AngularJS داده ها را تبدیل می کنند و  عبارتند از:

currency : اعداد را بصورت شکل ارزی قالب بندی می کند.
date : تاریخ را به شکل مشخص شده قالب بندی می کند.
filter : زیر مجموعه ای اس عناصر آرایه را انتخاب می کند.
json  : یک شی را به فرمت جی سان تبدیل می کند.
limitTo : یک آرایه یا رشته را محدود می کند به تعداد مشخصی از عناصر یا کاراکترها
lowercase : رشته را به حروف کوچک تبدیل می کند.
number : عدد را به رشته تبدیل میکند.
orderBy : یک آرایه را بر اساس عبارتی مرتب می کند.
uppercase : رشته را به حروف بزرگ تبدیل می کند.

افزودن فیلترها به عبارات

فیلترها را می توان با استفاده از علامت |  اضافه کرد که با یک فیلتر به آن خاتمه پیدا می کند.

فرمت فیلتر 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>


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

فیلترها به دایرکتیوها، مانند ng-repeat، با استفاده از کاراکتر | و به دنبال آن فیلتر اضافه می شوند:

فیلتر orderBy آرایه را مرتب می کند:

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

فیلتر currency

فیلتر currency یک عدد را به عنوان ارز تبدیل می کند:

<div ng-app="myApp" ng-controller="costCtrl">
<h1>Price: {{ price | currency }}</h1>
</div>

فیلتر filter

فیلتر filter یک زیر مجموعه از یک آرایه را انتخاب می کند.

فیلتر filter را فقط می توان در آرایه ها استفاده کرد، و آرایه ای را که حاوی تنها موارد مطابق است، بازگرداند.

مثال
نام هایی را که حاوی حروف “i” نام ببرید:

<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | filter : 'i'">
{{ x }}
</li>
</ul>
</div>

مثال زیر لیستی از اسامی را به همراه یک جعبه متن نشان می دهد و با تایپ کردن بخشی از نام، لیست اسامی فیلتر می شود:

<div ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter : test">
{{ x }}
</li>
</ul>
</div>

در مثال زیر یک جدول از اسامی و شهرها نشان داده شده و با کلیک روی نام هر ستون سطرها بر اساس آن ستون مرتب می شوند:

<div ng-app="myApp" ng-controller="namesCtrl">
<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('country')">Country</th>
</tr>
<tr ng-repeat="x in names | orderBy:myOrderBy">
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Carl',country:'Sweden'},
{name:'Margareth',country:'England'},
{name:'Hege',country:'Norway'},
{name:'Joe',country:'Denmark'},
{name:'Gustav',country:'Sweden'},
{name:'Birgit',country:'Denmark'},
{name:'Mary',country:'England'},
{name:'Kai',country:'Norway'}
];
$scope.orderByMe = function(x) {
$scope.myOrderBy = x;
}
});
</script>