گروه مقاله : جاوا اسكريپت Java Script
تاريخ انتشار : 1396/05/14 - 13:39
كد :7760

نحوه کاربرد فیلترها در آنگولار

در این مقاله به اهمیت کاربرد فیلترها و نحوه استفاده از آنها در آنگولارجی اس خواهیم پرداخت

 طراحی سایت در کرج

فیلترها میتوانند به فرمت داده ها در 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 مقدار یک آیتم از یک آرایه را بازگردانی می کند که دارای آیتمی مشابه فیلتر باشد.

مثال زیر نام ایتمی که دارای عبارت  i است را باز می گرداند.

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

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

مشاهده نتیجه

 

فیلتر Custom

شما میتوانید فیلتر خود را با ایجاد یک filter factory function با یک ماژول ایجاد کنید:

مثال

ایجاد یک فیلتر سفارشی به نام myFormat :

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

مشاهده نتیجه

 

فیلتر myFormat تمام کاراکتر ها را یکی درمیان به uppercase تبدیل خواهد کرد.

 

براي بهره مندي از مشاوره تخصصي در زمینه طراحی سایت در کرج با شرکت سارگون تماس بگيريد.

نظرات كاربران :