فیلترهای AngularJS

می‌توان در AngularJS فیلترهایی برای فرمت داده‌ها اضافه کرد.

فیلترهای AngularJS

AngularJS فیلترهایی برای تبدیل داده‌ها ارائه می‌دهد:

• currency اعداد را به صورت فرمت پولی در می‌آورد
• date تاریخ را به فرمت مشخصی در می‌آورد
• filter یک زیر مجموعه از آرایه را انتخاب می‌کند
• json یک شیء را به صورت یک رشته JSON در می‌آورد
• limitTo یک آرایه/زبان را به تعداد مشخصی از عناصر/حرف‌ها محدود می‌کند
• lowercase زبان را به صورت کوچک در می‌آورد
• number اعداد را به صورت زبان در می‌آورد
• orderBy با استفاده از عبارت آرایه‌ها را مرتب می‌کند
• uppercase زبان را به صورت بزرگ در بیاورد

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

می‌توان از نشانه‌ی خط افقی | برای افزودن فیلتر به عبارت استفاده کرد، سپس یک فیلتر دیگر.

uppercase فیلتر می‌خواهد زبان را به صورت بزرگ در بیاورد:

مثال

<div ng-app="myApp" ng-controller="personCtrl">
<p>نام {{ lastName | uppercase }}</p>
</div>

آزمایش کنید

lowercase فیلتر می‌خواهد زبان را به صورت کوچک در بیاورد:

مثال

<div ng-app="myApp" ng-controller="personCtrl">
<p>نام {{ lastName | lowercase }}</p>
</div>

آزمایش کنید

فیلتر را به دستورالعمل اضافه کنید

با استفاده از نشانه خط تیره | به دنبال فیلتر، می‌توان فیلتر را به دستورالعمل اضافه کرد، به عنوان مثال ng-repeat:

مثال

فیلتر orderBy آرایه را مرتب‌سازی می‌کند:

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

آزمایش کنید

فیلتر currency

currency فیلتر عدد را به فرمت پولی تبدیل می‌کند:

مثال

<div ng-app="myApp" ng-controller="costCtrl">
<h1>قیمت: {{ price | currency }}</h1>
</div>

آزمایش کنید

برای اطلاعات بیشتر در مورد فیلتر currency، به دفترچه راهنمای فیلترهای AngularJS مراجعه کنید.

فیلتر filter

filter فیلتر انتخاب زیر مجموعه آرایه را انجام می‌دهد.

filter فیلتر فقط برای آرایه‌ها استفاده می‌شود و آرایه‌ای که شامل موارد تطابق است را بازمی‌گرداند.

مثال

نام‌هایی که حرف "i" را شامل می‌شوند را بازمی‌گرداند:

<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
  <li ng-repeat="x in names | filter : 'i'">
    {{ x }}
  </li>
</ul>
</div>

آزمایش کنید

برای اطلاعات بیشتر در مورد فیلتر filter، به دفترچه راهنمای فیلترهای AngularJS مراجعه کنید.

آرایه را بر اساس ورودی کاربر فیلتر می‌کند

با تنظیم 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>

آزمایش کنید

آرایه را بر اساس ورودی کاربر مرتب‌سازی می‌کنیم

با کلیک بر روی سربرگ می‌توان ترتیب مرتب‌سازی را تغییر داد:

با اضافه کردن به سربرگ ng-click آمر، می‌توانیم یک تابع را اجرا کنیم که ترتیب مرتب‌سازی آرایه را تغییر می‌دهد:

مثال

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

آزمایش کنید

فیلترهای شخصی

شما می‌توانید با ثبت یک تابع کارخانه جدید برای فیلتر به داخل ماژول خود، فیلترهای شخصی خود را ایجاد کنید:

مثال

ایک نیمه-تخصصی فیلتر بنام "myFormat" بنویسید:

<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 فیلترها هر حرف را به ترتیب هر دو حرف به حروف بزرگ تبدیل می‌کند.