Introduction

In this blog, we will learn how to use Angular JS Filters.

The following filters are available in Angular js:

  • Currency: Format a number to a currency format.
  • Date: Format a date to a specified format.
  • Filter: Select a subset of items from an array.
  • Json: Format an object to a JSON string.
  • limitTo: Limits an array/string, into a specified number of elements/characters.
  • Lowercase: Format a string to lower case.
  • Number: Format a number to a string.
  • orderBy: Orders an array by an expression.
  • Uppercase: Format a string to upper case.

Step 1

Create an empty project in the Visual Studio of your choice.

Step 2

Add scripts and styles in head section.

  1. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  2. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  3. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  4. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  5. <script src="Employee.js"></script>

Step-3

Add web form for each filter right click project add new item choose web form or you can do all filters on one page -- it’s up to you.

Step-4

Create employee script and give the name Employee.js

  1. var app = angular
  2. .module("myModule", [])
  3. .controller("myController", function ($scope) {
  4. var employees = [
  5. { Name: "Airi Satou", Position: "Accountant", Office: "Tokyo", Salary: "162700", Start_Date:new Date("November 28, 2008") },
  6. { Name: "Bruno Nash", Position: "Software Engineer", Office: "London", Salary: "163500", Start_Date:new Date("May 03, 20113") },
  7. { Name: "Cedric Kelly", Position: "Senior Javascript Developer", Office: "Edinburgh", Salary: "106450", Start_Date: new Date("August 13, 2015") },
  8. { Name: "Dai Rios", Position: "Integration Specialist", Office: "Edinburgh", Salary: "162700", Start_Date: new Date("September 23, 2015") },
  9. { Name: "Finn Camacho", Position: "Pre-Sales Support", Office: "London", Salary: "163500", Start_Date: new Date("December 31, 2016") },
  10. { Name: "Garrett Winters", Position: "Sales Assistant", Office: "Edinburgh", Salary: "86000", Start_Date: "March 20, 2014" },
  11. { Name: "Hermione Butler", Position: "Customer Support", Office: "London", Salary: "132000", Start_Date: "Feb 1, 2017" },
  12. { Name: "Jackson Bradshaw", Position: "Support Engineer", Office: "Edinburgh", Salary: "206850", Start_Date: "Jan 10, 2010" },
  13. { Name: "Lael Greer", Position: "Software Engineer", Office: "London", Salary: "145600", Start_Date: "April 30, 2014" },
  14. { Name: "Martena Mccray", Position: "Team Leader", Office: "Edinburgh", Salary: "433060", Start_Date: "May 28, 2013" },
  15. { Name: "Olivia Liang", Position: "Developer", Office: "London", Salary: "145600", Start_Date: "July 11, 2015" },
  16. { Name: "Paul Byrd", Position: "Chief Financial Officer (CFO)", Office: "New York", Salary: "725000", Start_Date: "October 18, 2016" }
  17. ];
  18. $scope.employees = employees;
  19. });

Step 5

Design HTML web page:

  1. <body ng-controller="myController">
  2. <form id="form1" runat="server">
  3. <div class="container py-3">
  4. <h4 class="text-center text-uppercase">How to use filters in Angular js</h4>
  5. <table id="employee" class="table table-bordered">
  6. <thead class="bg-info text-white text-upparcase">
  7. <tr>
  8. <th>Name
  9. </th>
  10. <th>Position
  11. </th>
  12. <th>Office
  13. </th>
  14. <th>Salary
  15. </th>
  16. <th>Start Date
  17. </th>
  18. </tr>
  19. </thead>
  20. <tbody>
  21. <tr ng-repeat="employee in employees">
  22. <td>{{employee.Name}}</td>
  23. <td>{{employee.Position}}</td>
  24. <td>{{employee.Office}}</td>
  25. <td>{{employee.Salary}}</td>
  26. <td>{{employee.Start_Date}}</td>
  27. </tr>
  28. </tbody>
  29. </table>
  30. </div>
  31. </form>
  32. </body>

Currency filter

{{employee.Salary|currency}}

Angular

Date filter

{{employee.Start_Date|date:"dd/MM/yyyy"}}

Angular

Filter

  1. <body ng-controller="myController">
  2. <form id="form1" runat="server">
  3. <div class="container py-3">
  4. <h4 class="text-center">How to use <u>filter</u> in Angular js</h4>
  5. <label>Search: <input type="text" placeholder="search employees" class="form-control" ng-model="searchText"/></label>
  6. <table class="table table-bordered">
  7. <thead class="bg-info text-white text-upparcase">
  8. <tr>
  9. <th>Name
  10. </th>
  11. <th>Position
  12. </th>
  13. <th>Office
  14. </th>
  15. <th>Salary
  16. </th>
  17. <th>Joining Date
  18. </th>
  19. </tr>
  20. </thead>
  21. <tbody>
  22. <tr ng-repeat="employee in employees|filter:searchText">
  23. <td>{{employee.Name}}</td>
  24. <td>{{employee.Position}}</td>
  25. <td>{{employee.Office}}</td>
  26. <td>{{employee.Salary}}</td>
  27. <td>{{employee.Start_Date|date:"dd/MM/yyyy"}}</td>
  28. </tr>
  29. </tbody>
  30. </table>
  31. </div>
  32. </form>
  33. </body>
Angular

Json Filter

  1. <body ng-controller="myController">
  2. <form id="form1" runat="server">
  3. <div class="container py-3">
  4. <h4 class="text-center">How to use <u>json</u> filter in Angular js</h4>
  5. <pre>{{employees | json}}</pre>
  6. </div>
  7. </form>
  8. </body>
Angular

limitTo Filter

  1. <body ng-controller="myController">
  2. <form id="form1" runat="server">
  3. <div class="container py-3">
  4. <h4 class="text-center">How to use <u> limitTo</u> filter in Angular js</h4>
  5. <label>Rows to display : <input type="number" step="1" ng-model="rowCount" max="5" min="0" class="form-control" /></label>
  7. <table class="table table-bordered">
  8. <thead class="bg-info text-white text-upparcase">
  9. <tr>
  10. <th>Name
  11. </th>
  12. <th>Position
  13. </th>
  14. <th>Office
  15. </th>
  16. <th>Salary
  17. </th>
  18. <th>Joining Date
  19. </th>
  20. </tr>
  21. </thead>
  22. <tbody>
  23. <tr ng-repeat="employee in employees| limitTo:rowCount">
  24. <td>{{employee.Name}}</td>
  25. <td>{{employee.Position}}</td>
  26. <td>{{employee.Office}}</td>
  27. <td>{{employee.Salary}}</td>
  28. <td>{{employee.Start_Date|date:"dd/MM/yyyy"}}</td>
  29. </tr>
  30. </tbody>
  31. </table>
  32. </div>
  33. </form>
  34. </body
Angular

Lowercase

{{employee.Office|lowercase}}

Angular

Number

{{employee.Salary|number}}

Angular

Uppercase

{{employee.Position|uppercase}}

Angular

OrderBy

  1. <body ng-controller="myController">
  2. <form id="form1" runat="server">
  3. <div class="container py-3">
  4. <h4 class="text-center">How to use <u>orderBy</u> filter in Angular js</h4>
  5. <label>Sort By :</label>
  6. <select ng-model="sortColumn" class="custom-select col-md-3">
  7. <option value="Name">Name ASC</option>
  8. <option value="+Start_Date">Joining Date ASC</option>
  9. <option value="+Position">Position ASC</option>
  10. <option value="+Office">Office ASC</option>
  11. <option value="-Salary">Salary DESC</option>
  12. </select>
  13. <br />
  14. <br />
  15. <table class="table table-bordered">
  16. <thead class="bg-info text-white text-upparcase">
  17. <tr>
  18. <th>Name
  19. </th>
  20. <th>Position
  21. </th>
  22. <th>Office
  23. </th>
  24. <th>Salary
  25. </th>
  26. <th>Joining Date
  27. </th>
  28. </tr>
  29. </thead>
  30. <tbody>
  31. <tr ng-repeat="employee in employees|orderBy:sortColumn">
  32. <td>{{employee.Name}}</td>
  33. <td>{{employee.Position}}</td>
  34. <td>{{employee.Office}}</td>
  35. <td>{{employee.Salary}}</td>
  36. <td>{{employee.Start_Date|date:"dd/MM/yyyy"}}</td>
  37. </tr>
  38. </tbody>
  39. </table>
  40. </div>
  41. </form>
  42. </body>
Angular
Conclusion

In this blog, we have discussed all nine Angular js filters with a single Angular controller.

Step by step I have given example for all the filters. I hope you have understood all the filters.