Differentiation of AngularJS Filters

If you are interested to learn about the AngularJS Scope

Filters can be added in AngularJS to format data. AngularJS Filters allow us to format the data to display on UI without changing original format. Filters can be used with an expression or directives using pipe | sign. {{expression | filterName:parameter }} Angular includes various filters to format data of different data types.

AngularJS Filters

AngularJS provides filters to transform data:

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

Adding Filters to Expressions

Filters can be added to expressions by using the pipe character |, followed by a filter. The uppercase filter format strings to upper case:

Example

<div ng-app="myApp" ng-controller="personCtrl"> <
p>The name is {{ lastName | uppercase }}</p>  </div>

The lowercase filter format strings to lower case:

Example

<div ng-app="myApp" ng-controller="personCtrl"> <
p>The name is {{ lastName | lowercase }}</p>n </div>

Adding Filters to Directives

Filters are added to directives, like ng-repeat, by using the pipe character |, followed by a filter:

Example

The orderBy filter sorts an array:<div ng-app=”myApp” ng-controller=”namesCtrl”>

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

Read more about the currency filter in our AngularJS currency Filter Reference

When to use a filter in AngularJS?

When we want to display the data in view part in a particular format in that scenario we can use AngularJS filter. We can display the data in the uppercase format, lowercase format etc. In whatever format, we entered the text but it can easily get displayed in any format by angular as per the type of filter used. AngularJS Filters can change the way of displaying the output.

AngularJS Filter in View Template

Filters are applied on expression to refrain the input. We can apply the AngualrJS Filter in a view template. Also, we can apply a filter on the result obtained by another filter. Chaining is the phenomenon when filters are applied to the already filtered content.

Syntax:

{{ expression | filter1 | filter2 | ... }}

AngularJS Filters have arguments.

Syntax:

{{ expression | filter:argument1:argument2:... }}

When will filter get execute. Whenever the inputs have changed in the template, the filter gets to execute.

Filter an Array Based on User Input

By setting the ng-model directive on an input field, we can use the value of the input field as an expression in a filter. Type a letter in the input field, and the list will shrink/grow depending on the match:

• Jani
• Carl
• Margareth
• Hege
• Joe
• Gustav
• Birgit
• Mary
• Kai

Example

<div ng-app="myApp" ng-controller="namesCtrl"> <p><
input type="text" ng-model="test">&lt;/p> &lt;ul><br>  &lt;
li ng-repeat="x in names | filter : test"><br>    {{ x }}<br>  &lt;/li><br>&lt;/ul> &lt;/div>

What is filtering in angular?

Filter is an important part in AngularJS as well as Angular 2 or Angular 4. It is basically used to filter an item from a group of items, which are there in an array or an object array. It selects a subset of the items from an array and returns it as a new array and this item is displayed on UI.

Sort an Array Based on User Input

Click the table headers to change the sort order::

By adding the ng-click directive on the table headers, we can run a function that changes the sorting order of the array:

Example

<div ng-app="myApp" ng-controller="namesCtrl"> <
table border="1" width="100%"><br>  &lt;tr><br>    &lt;
th ng-click="orderByMe('name')">Name&lt;/th><br>    &lt;
th ng-click="orderByMe('country')">Country&lt;/th><br>  &lt;
/tr><br>  &lt;tr ng-repeat="x in names | orderBy:myOrderBy"><br>    &lt;
td>{{x.name}}&lt;/td><br>    &lt;td>{{x.country}}&lt;/td><br>  &lt;/tr><br>&lt;
/table> &lt;
/div> &lt;script><br>angular.module('myApp', []).controller('namesCtrl',
 function($scope) {<br>  $scope.names = [<br>    {name:'Jani',country:'Norway'},<br>    {name:'Carl',country:'Sweden'},<br>    {name:'Margareth',country:'England'},<br>    {name:'Hege',country:'Norway'},<br>    {name:'Joe',country:'Denmark'},<br>    {name:'Gustav',country:'Sweden'},<br>    {name:'Birgit',country:'Denmark'},<br>    {name:'Mary',country:'England'},<br>    {name:'Kai',country:'Norway'}<br>  ];<br>  $scope.orderByMe = function(x) {<br>    $scope.myOrderBy = x;<br>  }<br>});<br>&lt;/script>

Custom Filters

You can make your own filters by registering a new filter factory function with your module:

Example

Make a custom filter called "myFormat":<
ul ng-app="myApp" ng-controller="namesCtrl"><br>  &lt;
li ng-repeat="x in names"><br>    {{x | <strong>myFormat</strong>}}<br>  &lt;
/li><br>&lt;/ul> &lt;script><br>var app = angular.module('myApp', []);<br>app.
filter('<strong>myFormat</strong>', function() {<br>  return function(x) {<br>    var i, c, txt = "";
<br>    for (i = 0; i &lt; x.length; i++) {<br>      c = x[i];<br>      if (i % 2 == 0) {<br>        c = c.toUpperCase();<br>      }<br>      txt += c;<br>    }<br>    return txt;<br>  };
<br>});<br>app.controller('namesCtrl', function($scope) {<br>  $scope.names = ['Jani', 'Carl', 'Margareth', 'Hege', 'Joe', 'Gustav', 'Birgit', 'Mary', 'Kai'];<br>});&lt;/script>

Filters are used to modify the data. They can be clubbed in expression or directives using pipe (|) character. The following list shows the commonly used filters.

Uppercase Filter

Add uppercase filter to an expression using pipe character. Here we’ve added uppercase filter to print student name in all capital letters.

Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Upper Case: {{student.fullName() | uppercase}}

Lowercase Filter

Add lowercase filter to an expression using pipe character. Here we’ve added lowercase filter to print student name in all lowercase letters.

Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Lower Case: {{student.fullName() | lowercase}}

Currency Filter

Add currency filter to an expression returning number using pipe character. Here we’ve added currency filter to print fees using currency format.

Enter fees: <input type = "text" ng-model = "student.fees">
fees: {{student.fees | currency}}

Filter

To display only required subjects, we use subjectName as filter.

Enter subject: <input type = "text" ng-model = "subjectName">
Subject:
<ul>
   <li ng-repeat = "subject in student.subjects | filter: subjectName">
      {{ subject.name + ', marks:' + subject.marks }}
   </li>
</ul>

OrderBy Filter

To order subjects by marks, we use orderBy marks.

Subject:
<ul>
   <li ng-repeat = "subject in student.subjects | orderBy:'marks'">
      {{ subject.name + ', marks:' + subject.marks }}
   </li>
</ul>

Example

The following example shows use of all the above mentioned filters.

testAngularJS.htm

<html>
   <head>
      <title>Angular JS Filters</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      
      <div ng-app = "mainApp" ng-controller = "studentController">
         <table border = "0">
            <tr>
               <td>Enter first name:</td>
               <td><input type = "text" ng-model = "student.firstName"></td>
            </tr>
            <tr>
               <td>Enter last name: </td>
               <td><input type = "text" ng-model = "student.lastName"></td>
            </tr>
            <tr>
               <td>Enter fees: </td>
               <td><input type = "text" ng-model = "student.fees"></td>
            </tr>
            <tr>
               <td>Enter subject: </td>
               <td><input type = "text" ng-model = "subjectName"></td>
            </tr>
         </table>
         <br/>
         
         <table border = "0">
            <tr>
               <td>Name in Upper Case: </td><td>{{student.fullName() | uppercase}}</td>
            </tr>
            <tr>
               <td>Name in Lower Case: </td><td>{{student.fullName() | lowercase}}</td>
            </tr>
            <tr>
               <td>fees: </td><td>{{student.fees | currency}}
               </td>
            </tr>
            <tr>
               <td>Subject:</td>
               <td>
                  <ul>
                     <li ng-repeat = "subject in student.subjects | filter: subjectName |orderBy:'marks'">
                        {{ subject.name + ', marks:' + subject.marks }}
                     </li>
                  </ul>
               </td>
            </tr>
         </table>
      </div>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller('studentController', function($scope) {
            $scope.student = {
               firstName: "Mahesh",
               lastName: "Parashar",
               fees:500,
               
               subjects:[
                  {name:'Physics',marks:70},
                  {name:'Chemistry',marks:80},
                  {name:'Math',marks:65}
               ],
               fullName: function() {
                  var studentObject;
                  studentObject = $scope.student;
                  return studentObject.firstName + " " + studentObject.lastName;
               }
            };
         });
      </script>
      
   </body>
</html>