فیلترها (Filters)
«فیلتر (Filter)» داده را برای نمایش بهتر می سازد. فیلترها رشته، عدد، تاریخ یا آرایه را شکل می دهند. مثل فیلتر اینستاگرام برای عکس، اما برای داده.
معرفی فیلترها
با کاراکتر پایپ | فیلتر را به عبارت اضافه کن. سپس خروجی زیباتر می شود.
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | uppercase }}</p>
</div>
برعکسش هم ممکن است. حروف را کوچک کن و یکنواخت نمایش بده.
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | lowercase }}</p>
</div>
فیلتر در دایرکتیوها
در ng-repeat می توان مرتب سازی کرد. مثل مرتب سازی دفتر نمره.
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">{{ x.name + ', ' + x.country }}</li>
</ul>
</div>
نمونه های پرکاربرد
قیمت را با currency خوش فرم کن. نمایش حرفه ای ولی ساده بماند.
<div ng-app="myApp" ng-controller="costCtrl">
<h1>Price: {{ price | currency }}</h1>
</div>
با filter فقط موارد مطابق را نشان بده. مثل جستجو در دفتر.
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | filter: 'i'">{{ x }}</li>
</ul>
</div>
ورودی کاربر به عنوان فیلتر
با ng-model مقدار جستجو را بگیر. سپس لیست خودکار فیلتر می شود.
<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>
مرتب سازی با کلیک
با ng-click معیار مرتب سازی را عوض کن. سریع و واضح.
<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>
<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>
</div>
ساخت فیلتر سفارشی
می توانی فیلتر خودت را بسازی. مثل افکت مخصوص روی متن.
<ul ng-app="myApp" ng-controller="namesCtrl">
<li ng-repeat="x in names">{{ x | myFormat }}</li>
</ul>
<script>
var app = angular.module('myApp', []);
app.filter('myFormat', function() {
return function(x) {
var i;
var c;
var txt = '';
for (i = 0; i < x.length; i++) {
c = x[i];
if (i % 2 == 0) {
c = c.toUpperCase();
}
txt += c;
}
return txt;
};
});
app.controller('namesCtrl', function($scope) {
$scope.names = ['Jani', 'Carl', 'Margareth', 'Hege', 'Joe', 'Gustav', 'Birgit', 'Mary', 'Kai'];
});
<\/script>
گام های عملی
- بعد از عبارت، یک
|بگذار. - نام فیلتر مناسب را بنویس.
- در تکرار یا متن از آن استفاده کن.
- در صورت نیاز فیلتر سفارشی بساز.
نکته: اسکوپ داده ها را تامین می کند. برای درک بهتر به اسکوپ ها سر بزن. سپس برای مدیریت منطق به سرویس ها برو.
جمع بندی سریع
- فیلترها نمایش داده را زیبا می کنند.
- پایپ
|فیلتر را فعال می کند. - در تکرارها مرتب سازی آسان است.
- می توانی فیلتر اختصاصی بسازی.