فیلترها در AngularJS

فیلترها در AngularJS

فیلترها را می‌توان با یک کاراکتر " | " به عبارات (expression) و directive (دستورات) اضافه کرد.

با بهره گیری از فیلترهای AngularJS می توان داده‌ها را تبدیل کرد:

Currency: عدد را با فرمت پول رایج نمایش می‌دهد/فرمت عدد به پول رایج.

Filter : یک زیر مجموعه از آیتم‌های موجود در یک آرایه را انتخاب کرده و برمی‌گرداند.

Lowercase: فرمت یک رشته را به حروف کوچک تبدیل می‌کند و آن را با حروف کوچک نمایش می‌دهد.

orderBy: آرایه را بر اساس یک رشته مرتب می‌سازد.

Uppercase: فرمت رشته را به حروف بزرگ تبدیل می‌کند.

افزودن فیلتر به عبارت‌ها

همان طور که بالا نیز گفته شد، یک فیلتر را می‌توان به وسیله‌ی کاراکتر " | " به عبارت مد نظر اضافه کرد. در دو مثال بعدی از همان کنترلگر person درس پیشین استفاده می‌کنیم. فیلترuppercase رشته ها را با حروف بزرگ نمایش می‌دهد:

<!DOCTYPE html> <html> <head> <title></title> <script src="Angular.js"></script> </head> <body> <div ng-app="myApp" ng-controller="personCtrl"> <p>The name is {{ lastName | uppercase }}</p> </div> <script src="personController.js"></script> </body> </html>

فیلتر lowercase رشته ها را با حروف کوچک تبدیل کرده و نمایش می‌دهد:

<!DOCTYPE html> <html> <head> <title></title> <script src="Angular.js"></script> </head> <body> <div ng-app="myApp" ng-controller="personCtrl"> <p>The name is {{ lastName | lowercase }}</p> </div> <script src="personController.js"></script> </body> </html>

فیلترcurrency

فرمت یک عدد را به فرمت پول رایج تبدیل کرده یا به عبارتی یک عدد را به صورت (در قالب) پول رایج نمایش می‌دهد:

<!DOCTYPE html> <html> <head> <title></title> <script src="Angular.js"></script> </head> <body> <div ng-app="myApp" ng-controller="costCtrl"> Quantity: <input type="number" ng-model="quantity"> Price: <input type="number" ng-model="price"> <p>Total = {{ (quantity * price) | currency }}</p> </div> <script> var app = angular.module('myApp', []); app.controller('costCtrl', function ($scope) { $scope.quantity = 1; $scope.price = 9.99; }); </script> </body> </html>

افزودن فیلتر به Directive ها

فیلتر را می توان با استفاده از کاراکتر " | " به directive مورد نظر ضمیمه کرد.

orderBy یک آرایه را به وسیله‌ی یک عبارت (expression) مرتب می‌سازد:

<!DOCTYPE html> <html> <head> <title></title> <script src="Angular.js"></script> </head> <body> <div ng-app="myApp" ng-controller="namesCtrl"> <p>Looping with objects:</p> <ul> <li ng-repeat="x in names | orderBy:'country'"> {{ x.name + ', ' + x.country }} </li> </ul> </div> <script src="namesController.js"> </script> </body> </html>

فیلتر کردن ورودی

یک filter که برای فیلتر کردن و انتخاب ورودی‌های خاص در نظر گرفته شده است، به واسطه‌ی یک کاراکتر " | " به directive پیوست شده و به دنبال آن فیلتر مورد نظر، کاراکتر دو نقطه " : " و نام مدل تایپ می‌شوند.

Filter یک تعداد مشخص یا زیرمجموعه‌ای از آیتم‌های آرایه را انتخاب کرده و برمی‌گرداند:

<!DOCTYPE html> <html> <head> <title></title> <script src="Angular.js"></script> </head> <body> <div ng-app="myApp" ng-controller="namesCtrl"> <p>Filtering input:</p> <p><input type="text" ng-model="test"></p> <ul> <li ng-repeat="x in names | filter:test | orderBy:'country'"> {{ (x.name | uppercase) + ', ' + x.country }} </li> </ul> </div> <script src="namesController.js"></script> </body> </html>



نظرات کاربران



عبارت امنیتی : حاصل 4 × 2 می شود :
متن پیام :