در قسمت نهم از اموزش انگولار جی اس قصد داریم فیلتر های 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 هر رشته دیگری را به حروف بزرگ تبدیل می کند. در مثال بالا با استفاده از همین فرمت ساخته شده یکی در میان حروف را به حروف بزرگ تبدیل کردیم.
شما با موفقیت به جلسه ی نهم از اموزش انگولار رسیدید.
ممنون که با کدپز همراه بودید.
موفق باشید.
