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