مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش AngularJS را دنبال می کنند. تاکنون با چگونگی استفاده از داده ها بین نمای View و کنترلرهای AngularJS ، آشنا شدید. در این بخش از ادامه ی آموزش ها قصد داریم در قالب مباحث آشنایی با Filter یا فیلترها در AngularJS ، شما را با چگونگی تغییر دادن و ویرایش کردن فرمت یا قالب بندی داده های AngularJS در نمای HTML، آشنا کنیم پس با ما باشید با آموزش ایجاد فیلترها در AngularJS .
در AngularJS شما با استفاده از شی Filter ، می توانید برای تغییر فرمت داده ها، اقداماتی از جمله بزرگ بودن یا کوچک بودن حروف، اندازه فونت ، مرتب سازی داده ها و … را انجام دهید که در ادامه ی بخش چگونگی انجام این اعمال را بررسی می کنیم.
آشنایی با Filter یا فیلترها در AngularJS
فیلترها را می توان در AngularJS برای فرمت داده ها اضافه کرد.
Filter دستوراتی را برای فرمت های گوناگون داده ها ارائه می دهد:
currency : اعداد را به فرمت ارز تبدیل می کند.date : تاریخ را در فرمت مشخصی تبدیل می کند.filter : برای انتخاب آیتمی از مجموعه آرایه ها استفاده می شود.json : یک شی را به فرمت JSON تبدیل می کند.limitTo : آرایه را به تعدا مشخصی از عناصر محدود می کند.lowercase : رشته ها را به حروف کوچک تبدیل می کند.number : اعداد را به رشته تبدیل می کند.orderBy : برای مرتب سازی آرایه استفاده می شود.uppercase : رشته ها را به حروف بزرگ تبدیل می کند.
افزودن فیلتر به داده ها
فیلترها را می توان با استفاده از علامت خط عمودی | اضافه کرد، سپس یک فیلتر را بعد از آن علامت اضافه می کنیم.
استفاده از فیلتر برای تبدیل رشته ای به حروف بزرگ:
مثال :
| <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
از filter برای انتخاب از زیر مجموعه های آرایه استفاده می شود.
دستور 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> |
مرتب سازی داده ها بر اساس ورودی کاربر
روی بخش header جدول زیر کلیک کنید تا نوع مرتب سازی تغییر کند:
| نام | کشور |
|---|
| Joe | Denmark |
| Birgit | Denmark |
| Margareth | England |
| Mary | England |
| Jani | Norway |
| Hege | Norway |
| Kai | Norway |
| Carl | Sweden |
| Gustav | Sweden |
با افزودن دستور ng-click به بخش hearder جدول، شما می توانید. از یک تابع برای مرتب سازی جدول استفاده کنید:
مثال :
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 33 | <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> |
فیلترهای سفارشی
شما همچنین می توانید با استفاده از دستورات جاوااسکریپت در محیط AngularJS، فیلترهای جدیدی را تولید کرده و استفاده کنید:
مثال :
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 | <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 ایجاد کردیم. هر کاراتری را به حروف بزرگ تبدیل می کند.
کلام آخر
در این بخش که به منظور آشنایی با Filter یا فیلترها در AngularJS ، ارائه شد. شما را با انواع فیلترهای تعریف شده در AngularJS و کاربرد هر یک آشنا کردیم. در نهایت چگونگی تعریف یک فیلتر جدید را نیز یاد گرفتید. امیدواریم که از مطالب آموزش فوق، به اندازه ی کافی استفاده کرده باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
