تصویر امیر حسین اکبری
فیلترهای انگولار را میتوان با استفاده از خطی عمودی ( | ) به داده ها و دستورات انگولار اضافه کرد.

فیلترهای انگولار

از فیلترهای انگولار میتوان به منظور تبدیل داده ها استفاده کرد. از این فیلترها میتوان به موارد زیر اشاره کرد:

فیلتر توضیحات
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>

توضیح: در این مثال نام ها به صورت کاراکتر بزرگ نمایش داده می شوند.


فیترها را میتوان به دستورات directive نیز اضلفه کرد:

<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

توضیح: در این مثال خروجی بر اساس نام کشورها Sort می شوند. ( از A تا Z)


دستور ng-click: دستوری را موقع کلیک کردن اجرا می کند. به عنوان مثال با افزودن ng-click به دستورات directive میتوانید:

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

توضیح: در این مثال مرتب سازی بر اساس تابع myOrderBy انجام میگیرد. با استفاده از orderByMe('name') ورودی پارامتر orderByMe مقدار name شده و بر اساس نام Sort انجام می شود.


مثالی از فیلتر json در انگولار که اطلاعات را به فرمت json به کاربران نشان می دهد:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="jsCtrl">
<pre>{{customer | json}}</pre>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('jsCtrl', function($scope) {
    $scope.customer = {
        "name" : "Alfreds Futterkiste",
        "city" : "Berlin",
        "country" : "Germany"
    };
});
</script>
</body>
</html>

خروجی آن به صورت زیر است:

{
  "name": "Alfreds Futterkiste",
  "city": "Berlin",
  "country": "Germany"
}

 

افزودن نظر جدید