اعمال فیلتر در angular

در Angular از فیلترها برای نمایش اطلاعات موجود در صفحه وب با فرمت دلخواه استفاده می شود و استفاده از آنها کمک شایانی به یکسان سازی اطلاعات مختلف جهت نمایش و همچنین محدود سازی آنها می کند. یکی دیگر از قابلیت های مهم فیلترها، استفاده از آنها بصورت سلسله مراتبی می باشد به طوری که یک فیلتر می تواند روی فیلتر دیگری نیز اعمال گردد.

نحوه استفاده

فیلترهایی که در Angular قابل استفاده هستند به شرح زیر می باشند:

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

برای استفاده از فیلترها کافی است بعد از expression مورد نظر یک علامت | قرار داده و سپس فیلتر دلخواه را اعمال کنید.

<p>My name is: {{ lastName | uppercase }}</p>
<p>My name is: {{ lastName | lowercase }}</p>

مثال: لیستی از افراد به همراه شهرهایشان ایجاد کرده و سپس اطلاعات را براساس نام افراد بصورت مرتب شده نمایش دهید.

تحلیل: برای ذخیره سازی اطلاعات می توان از یک object با دو فیلد نام و شهر استفاده نمود.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Angular Tutorial</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  </head>
  <body ng-app="benoApp">
    <div ng-controller="myController">
      <ul>
        <li ng-repeat="x in names | orderBy:'name'">{{x.name}} - {{x.city}}</li>
      </ul>
    </div>
    <script>
      var app = angular.module("benoApp", []);
      app.controller("myController", function ($scope) {
        $scope.names = [
          {name:'Ali', city:'Tehran'},
          {name:'Mostafa', city:'Esfahan'},
          {name:'Maryam', city:'Shiraz'},
          {name:'Tina', city:'Tehran'},
          {name:'Mohamad', city:'Tabriz'},
        ];
      });
    </script>
  </body>
</html>

در مثال فوق اگر قصد داشته باشید اطلاعات را فیلتر کنید بطوریکه تنها اطلاعات افرادی که شهر آنها Tehran می باشد می بایست کدها را به شکل زیر اصلاح نمایید.

<li ng-repeat="x in names | filter:'Tehran'">{{x.name}} - {{x.city}}</li>

مثال: برنامه ای بنویسید که لیستی از نام افراد را نمایش داده و با وارد کردن متنی درون input، اطلاعات را متناسب با آن فیلتر نماید.

تحلیل: از آنجا که قصد داریم فقط نام افراد را نمایش دهیم می توان از یک آرایه برای ذخیره سازی آنها استفاده نمود. برای حل این مثال ابتدا باید اپلیکیشن و کنترلر برنامه را ایجاد نمود.

<body ng-app="benoApp">
  <div ng-controller="myController">
    
  </div>
</body>

در ادامه می بایست یک input به برنامه اضافه کرده و آن را توسط ng-model به متغیری مانند search اتصال دهیم تا هر آنچه که درون input وارد می شود درون متغیر search قرار گیرد.

<body ng-app="benoApp">
  <div ng-controller="myController">
    Enter a name for filter : <input type="text" ng-model="search"/>
  </div>  
</body>

سپس دستورات لازم را برای تولید اطلاعات می نویسیم.

<body ng-app="benoApp">
  <div ng-controller="myController">
    Enter a name for filter : <input type="text" ng-model="search"/>
  </div>
  <script>
    var app = angular.module("benoApp", []);
    app.controller("myController", function ($scope) {
      $scope.names = [
        "Ali",
        "Farzad",
        "Mina",
        "Samira",
        "Ayda",
        "Shayan",
        "Elmira",
        "Negar",
        "Hamid",
        "Ardalan",
        "Behzad",
        "Kamran"
      ];
    });
  </script>
</body>

و در نهایت اطلاعات را همراه فیلتر مورد نظر (محتوای متغیر search) نمایش می دهیم.

<body ng-app="benoApp">
  <div ng-controller="myController">
    Enter a name for filter : <input type="text" ng-model="search"/>
    <ul>
      <li ng-repeat="x in names | filter:search">{{x}}</li>
    </ul>
  </div>
  <script>
    var app = angular.module("benoApp", []);
    app.controller("myController", function ($scope) {
      $scope.names = [
        "Ali",
        "Farzad",
        "Mina",
        "Samira",
        "Ayda",
        "Shayan",
        "Elmira",
        "Negar",
        "Hamid",
        "Ardalan",
        "Behzad",
        "Kamran"
      ];
    });
  </script>
</body>