Welcome to FindNerd. Today we are going to discuss one of feature of angularJS that is filters. We will discuss angularJS features one by one so keep reading our blogs. Filters play with data. It transforms the data as well as change the format of data.

There are different types of filters available but you can also build your own by using API $filterProvider. You can apply the filter on the expression by using pipe(|) character in view template. Kindly see the syntax below.

{{ expression | filter }}

You can also apply two or more filters at a same time. Please have a look.

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

You can also add the filter in controller or services/directives. Please have a look

angular.module('FilterInControllerModule', []).
controller('FindnerdController', ['filterFilter', function(findnerdFilter) {
  this.array = [
    {name: 'Taank'},
    {name: 'Uniyal'},
    {name: 'Bhatt'},
    {name: 'Rana'},
    {name: 'Sharma'},
    {name: 'Tomar'}
  ];
  this.filteredArray = filterFilter(this.array, 'a');
}]);

Now we are going to list core filters of angularJS. Kindly check the list below.

1) uppercase

2) lowercase

3) currency

4) filter

5) orderby

6) date

7) json

8) number

9) limitTo

Now we are going to explain these filters one by one. Please have a look.

1) uppercase:

It is useful to convert the string or expression into uppercase letters.

// in view template
<script>
var intro = "Welcome to Findnerd";
</script>

<p>{{ intro | uppercase }}</p>

// in javascript
MyCtrl = function($scope, uppercaseFilter) {

  $scope.blockcase = uppercaseFilter(intro, expression);
}

2) lowercase :

Useful to convert expression or string in lowercase.

// in view template
<script>
var intro = "Welcome to Findnerd";
</script>

<p>{{ intro | lowercase }}</p>

3) json :

Useful to convert the javascript object into json format.

// in html
Syntax : {{ json_expression | json : spacing}}

in javascript
syntax : $filter('json')(object, spacing)

4) number :

Useful to format the number.

5) date : 

 Useful to format the date on different formats. Different formats available are such as 'yyyy','yy','M','MMM' etc

//in View template
Syntax : {{ date_expression | date : format : timezone}}

//in javascript
Syntax : $filter('date')(date, format, timezone)

6) Currency :

Useful to set the number as currency.

//in view template

Syntax : {{ currency_expression | currency : symbol : fractionSize}}

//in javascript

Syntax: $filter('currency')(amount, symbol, fractionSize)

7) limitTo :

Useful to create a new array to short out the elements.

//in view template
Syntax : {{ limitTo_expression | limitTo : limit : begin}} 
//in javascript
Syntax : $filter('limitTo')(input, limit, begin)

8) orderBy : Return array as per the specified element. Like we can display the database record as per the specified field.

//index.html


<div ng-controller="FindnerdController">
  <table class="resources">
    <tr>
      <th>Name</th>
      <th>Phone Number</th>
      <th>Age</th>
    </tr>
    <tr ng-repeat="resource in resources | orderBy:'name'">
      <td>{{resource.id}}</td>
      <td>{{resource.name}}</td>
      <td>{{friend.type}}</td>
    </tr>
  </table>
</div>

//javascript controller


angular.module('orderByFindnerd', [])
.controller('FindnerdController', ['$scope', function($scope) {
  $scope.friends = [
    {name: 'Evon',   id: '5551212',  type: 'main'},
    {name: 'givenly',   id: '5559876',  type: 'secondary'},
    {name: 'master',   id: '5554321',  type: 'super'}
  ];
}]);

9) Filter :

Useful to select/filter the elements from array.

<div ng-init="resources = [{name: 'Evon',   id: '5551212',  type: 'main'},
    {name: 'givenly',   id: '5559876',  type: 'secondary'},
    {name: 'master',   id: '5554321',  type: 'super'}]"></div>

<label>Search: <input ng-model="searchText"></label>
<table id="searchTextResults">
  <tr><th>Name</th><th>Id</th></tr>
  <tr ng-repeat="resource in resources | filter:searchText">
    <td>{{resource.name}}</td>
    <td>{{resource.id}}</td>
  </tr>
</table>

In above code we are filtering mentioned array as per the text available in searchText input box.

Thank you for being with us!