Filters In AngularJS

These filters are nothing but basic functions to convert string data to upper or lower case, filter array data, order by etc. These filters can be applied on the data while we bind them, using the expressions. Let's see how we can use some these filters, one by one.

 

To start with, we will use the following controller with two model properties, firstName & lastName:  

<script type="text/javascript">

      var mainApp = angular.module('mainApp', []);

      mainApp.controller('filtersController', function ($scope) {

          $scope.firstName = 'Jasminder';
          $scope.lastName = 'Singh';

      });
  </script>

Uppercase: As the name suggests, this filter is used to simply convert the text to uppercase. To use it, simply apply this filter along the with the target text, using the piping symbol. So we will bind the above model with the html. 

<div ng-app="mainApp" ng-controller="filtersController">
     <fieldset>
         <legend>Filters in angular-js</legend>
         <p>First Name is :  {{ firstName | uppercase}} </p>
     </fieldset>
     <br />
 </div>

Lowercase: This one will simply display the text in the lower case. To use it, we can apply it like we did for upper case. So the html changes to:

<div ng-app="mainApp" ng-controller="filtersController">
       <fieldset>
           <legend>Filters in angular-js</legend>
           <p>First Name is :  {{ firstName | uppercase}} </p>
           <p>First Name is :  {{ lastName | lowercase}} </p>
       </fieldset>
       <br />
   </div>

Run the code and see the results.

 

Now let's apply the another filter named filter. 

 

Filter: This is basically used to apply filter on an array of data. So let's add an array named employees in our controller, with some data in it. Also, we will add a property named searchText, which will be model property to perform the search on the input type control. So our controller will look like following: 

var mainApp = angular.module('mainApp', []);

mainApp.controller('filtersController', function ($scope) {

    $scope.searchText = '';

    $scope.firstName = 'Jasminder';
    $scope.lastName = 'Singh';

    $scope.employees = [
       { name: 'Emp A', salary: 10000 },
       { name: 'Emp B', salary: 20000 },
       { name: 'Emp C', salary: 40000 },
       { name: 'Emp D', salary: 23000 },
       { name: 'Emp E', salary: 13000 },
    ]
});

Next, we will bind the searchText property with an input type control and also bind the array to display data in html page. So the html will look like the following:   

<div ng-app="mainApp" ng-controller="filtersController">
        <fieldset>
            <legend>Filters in angular-js</legend>
            <p>First Name is :  {{ firstName | uppercase}} </p>
            <p>First Name is :  {{ lastName | lowercase}} </p>
        </fieldset>
        <br />
        <p>
            Enter a Text to Search:
            <input type="text" ng-model="searchText" />
        </p>
        <ul>
            <li ng-repeat="emp in employees | filter: searchText">{{ 'Name is: ' +  emp.name + ', salary is:' + emp.salary }}
            </li>
        </ul>
    </div>

See the filter set to the searchText model property. Run the application and type any value and see the filter getting applied on the array. 

 

 

Next we will discuss how we can apply the orderby filter on the data. For this, we simply add the orderBy property, specifying the column name (on which the clause is to be applied) in single quotes. So our code will look like the following:

<ul>
   <li ng-repeat="emp in employees | orderBy: 'salary'">{{ 'Name is: ' +  emp.name + ', salary is:' + emp.salary }}
   </li>
</ul>

Run the code and see the data being displayed in ascending order. To apply the descending order, we need to set a property 'true', separated by colon. See the code below: 

<ul>
    <li ng-repeat="emp in employees | orderBy: 'salary': true">{{ 'Name is: ' +  emp.name + ', salary is:' + emp.salary }}
    </li>
</ul>

Run the code and see the data in descending order.

 

 

So these were some of the basic filters. Hope you enjoyed reading it.