در قسمت نهم از آموزش انگولار جی اس قصد داریم فیلترهای AngularJs را بررسی کنیم.
پیشنهاد می‌شود قبل از ورود به این قسمت سایر قسمت‌های دوره‌ی انگولار جی اس را مطالعه بفرمایید.
برای فرمت بندی داده‌ها در AngularJS از فیلترها استفاده می‌شود.
فیلترهای AngularJS
فیلترهای انگولار جی اس به شرح زیر می‌باشند:
currency: یک عدد را به فرمت ارز تبدیل میکند.
data: تاریخ یک فرمت مشخص‌شده را فرمت میکند.
filter : یک زیرمجموعه از یک آرایه را انتخاب کنید.
json: یک شیء را به یک رشته JSON قالب‌بندی کنید.
limitTo: یک آرایه / رشته را به تعداد مشخصی از عناصر / کاراکترها محدود میکند.
lowercace: رشته را به حروف کوچک تبدیل میکند.
number: عددها را به رشته تبدیل میکند.
orderBy: یک آرایه را با یک عبارت اختصاص می‌دهد.
uppercase: رشته را به حروف بزرگ تبدیل میکند.
اضافه کردن فیلترها به عبارات
فیلترها را می‌توان به استفاده از علامت | به عبارات متصل کرد، با این کار یک فیلتر به عبارات اضافه می‌شود.
فیلتر uppercase حروف رشته‌ها را به حروف بزرگ تبدیل میکند به مثال زیر توجه کنید:
|
1 2 3 4 5 6 7 8 9 |
<div ng-app="myApp" ng-controller="personCtrl"> <p>The name is {{ lastName | uppercase }}</p> </div> < script > angular.module('myApp', []).controller('personCtrl', function($scope) { $scope.firstName = "Morteza", $scope.lastName = "Afzali" }); </script> |
فیلتر lowercase حروف رشته را به حروف کوچک تبدیل میکند به مثال زیر توجه کنید:
|
1 2 3 4 5 6 7 8 9 |
<div ng-app="myApp" ng-controller="personCtrl"> <p>The name is {{ lastName | lowercase }}</p> </div> < script > angular.module('myApp', []).controller('personCtrl', function($scope) { $scope.firstName = "Morteza", $scope.lastName = "Afzali" }); </script> |
اضافه کردن فیلترها به دستورالعمل‌ها
فیلترها می‌توانند به دستورالعمل‌ها اضافه شوند، مانند ng-repeat، با استفاده از علامت | می‌توان فیلترها را به دستورالعمل‌ها اضافه کرد به مثال زیر دراین‌باره توجه کنید.
فیلتر orderBy آرایه‌ها را دسته‌بندی میکند:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div ng-app="myApp" ng-controller="namesCtrl"> <ul> <li ng-repeat="x in names | orderBy:'country'"> {{ x.name + ', ' + x.country }} </li> </ul> </div> < script > angular.module('myApp', []).controller('namesCtrl', function($scope) { $scope.names = [ {name:'Morteza',country:'Tehran'}, {name:'Reza',country:'Shiraz'}, {name:'Ali',country:'Mashhad'}, {name:'Hossien',country:'Karaj'}, {name:'Poriya',country:'Esfehan'}, {name:'Sajjad',country:'Gilan'}, {name:'Mohammad',country:'Tabriz'} ]; }); </script> |
فیلتر currency
همان‌طور که اشاره شد فیلتر currency عدد را به ارز تبدیل میکند. در مثال زیر به‌وضوح نمایش داده می‌شود.
|
1 2 3 4 5 6 7 8 9 |
<div ng-app="myApp" ng-controller="costCtrl"> <h1>قیمت: {{ price | currency }}</h1> </div> < script > var app = angular.module('myApp', []); app.controller('costCtrl', function($scope) { $scope.price = 58; }); </script> |
فیلتر filter
فیلتر filter زیرمجموعه از آرایه‌ها را انتخاب میکند.
فیلتر filter را تنها می‌توان در آرایه‌ها استفاده کرد و آرایه‌ای را که حاوی تنها موارد مطابق است، بازمی‌گرداند.
نمایش تمامی نام‌هایی که شامل حرف “I” می‌باشند:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div ng-app="myApp" ng-controller="namesCtrl"> <ul> <li ng-repeat="x in names | filter : 'i'"> {{ x }} </li> </ul> </div> < script > angular.module('myApp', []).controller('namesCtrl', function($scope) { $scope.names = [ 'Morteza', 'Reza', 'Poriya', 'Sajjad', 'Mohammad', 'Ali', 'Leila', 'Ladan' ]; }); </script> |
استفاده از فیلترها در آرایه بر اساس ورودی کاربر
با استفاده از دستورالعمل ng-model در فیلد ورودی، شما می‌توانید مقدار فیلد ورودی را به‌صورت بیان در یک فیلتر استفاده کنید. مثال زیر پیدا کردن کلمه‌ای که شامل حرف واردشده در کادر ورودی باشد را نشان می‌دهد:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div ng-app="myApp" ng-controller="namesCtrl"> <p>لطفا حرف برای جستجو داخل کادر بنویسید :</p> <p><input type="text" ng-model="test"></p> <ul> <li ng-repeat="x in names | filter:test"> {{ x }} </li> </ul> </div> < script > angular.module('myApp', []).controller('namesCtrl', function($scope) { $scope.names = [ 'Morteza', 'Ali', 'Reza', 'Leila', 'Poriya', 'Sajjad', 'Mohammad', 'Hamid' ]; }); </script> |
مرتب‌سازی آرایه‌ها بر اساس ورودی کاربران
یک مثال ساده در ارتباط با دسته‌بندی داده‌ها را در مثال زیر بیان کرده‌ایم شما با کلیک کردن در هر کادر می‌توانید دسته‌بندی و مرتب شدن آنها را بر اساس حروف الفبا ببینید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<p>با کلیک کردن روی سربرگ هر قسمت نام یا شهر کلمات بر اساس حروف الفبای نام یا شهر مرتب سازی می‌شوند:</p> <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:'Morteza',country:'Tehran'}, {name:'Reza',country:'Shiraz'}, {name:'Ali',country:'Mashhad'}, {name:'Poriya',country:'Esfehan'}, {name:'Sajjad',country:'Gilan'}, {name:'Mohammad',country:'Tabriz'} ]; $scope.orderByMe = function(x) { $scope.myOrderBy = x; } }); </script> |
فیلترهای سفارشی
شما می‌توانید فیلترهای خود را با ثبت یک کارخانه فیلتر جدید با ماژول خود ایجاد کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<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 = [ 'Morteza', 'Reza', 'Ali', 'Ahmad', 'Poriya', 'Sajjad', 'Hamid' ]; }); </script> |
فیلتر myFormat هر رشته دیگری را به حروف بزرگ تبدیل میکند. در مثال بالا با استفاده از همین فرمت ساخته‌شده یکی در میان حروف را به حروف بزرگ تبدیل کردیم.
شما با موفقیت به جلسه‌ی نهم از آموزش انگولار رسیدید.
ممنون که با کدپز همراه بودید.
موفق باشید.
