AngularJS Filters Overview

What are AngularJS Filters?

AngularJS currency Filter

AngularJS orderby Filter

AngularJS date Filter

AngularJS filter

Dynamic filter using AngularJS filter

AngularJS uppercase Filter

AngularJS JSON Filter

AngularJS number Filter

AngularJS limitTo Filter

AngularJS Custom Filters

Invoke AngularJS Custom Filters from JavaScript

AngularJS uppercase Filter

AngularJS filters are used to format/transform the data displayed in the view, filters can be used with expressions, ng-bind, ng-repeat etc and act upon the data from the model. The case filters are used to format cast strings between Upper/Lower cases.

The following is the syntax for using uppercase filters
{{<string/variable> | uppercase}}

The following is an example of using uppercase filter.

Dynamic filter using AngularJS filter

In the post AngularJS filter, we saw on how to use filters to define a static filter in an array of elements, we can further enhance this by binding the filter text to a textbox control to create a dynamic filter.

In the following example a ng-repeat directive is used to display a list of employees, txtSearch is a textbox which is bound as the filter condition for the list, now as the user types some text in the textbox, the list will get filtered based on the text entered.

<html ng-app>
<head>
    <meta charset="utf-8" />
    <title>AngularJS - Basic</title>
    <script src="angular.min.js"></script>
        <script>
                function searchController($scope){
                       $scope.Reset = function() {
                                       $scope.txtSearch = '';
                             }
                }
    </script>
</head>
<body>
          <div ng-controller="searchController" ng-init="Employees=[
                                      {id:1,Name:'Tom'},
                                      {id:2,Name:'Harry'},
                                      {id:3,Name:'Peter'},
                                      {id:4,Name:'Thomas'},
                                      {id:5,Name:'Tiger'},
                                      {id:6,Name:'Topas'}]">
                    Search Text: <input type="text" ng-model="txtSearch"> 
                    <button ng-click="Reset()">Clear</button>
                    <ul>
                       <li ng-repeat="emp in Employees | filter:txtSearch">
                         {{ emp.id }} - {{ emp.Name }}<br/>
                       </li>
                   </ul>
          </div>
</body>
</html>

Output:

AngularJS filter

AngularJS filter, is a special type of filter which can be used to filter out the contents of an array/collection bound to an ng-repeat directive, this comes in handy when we need to implement dynamic search/filtering capability on an array/collection of elements

The following is the syntax for using AngularJS filter
ng-repeat="<array/collection> | filter:<filter text>"

The following is an example of using filter, filter out specific elements from an array of objects.

AngularJS date Filter

AngularJS filters are used to format/transform the data displayed in the view, filters can be used with expressions, ng-bind, ng-repeat etc and act upon the data from the model. The date filter is used to format date values.

The following is the syntax for using date filters
{{ <date variable> | date: '<date format>' }}

The following is an example of using date filters.

AngularJS orderby Filter

AngularJS filters are used to format/transform the data displayed in the view, filters can be used with expressions, ng-bind, ng-repeat etc and act upon the data from the model. The orderby filter is used to sort a list of elements in an array / collection, this comes in handy when we want to implement sorting feature in a table/list in the view.

The following is the syntax for using orderby filters
<li ng-repeat="<collection> | orderBy:'<column>'">

The following is an example of using orderby filters.

AngularJS currency Filter

AngularJS filters are used to format/transform the data displayed in the view, filters can be used with expressions, ng-bind, ng-repeat etc and act upon the data from the model. The currency filter is used to format currency format display in the view

The following is the syntax for using currency filters
{{ <variable> | currency }}

The following is an example of using currency filters.

What are AngularJS Filters?

Filters in AngularJS are used to format/modify/transform the data displayed in the view, filters are used with expressions and directives like ng-bind, ng-repeat etc which are used to display model data in the view.  Filters are come in handy and can help us reduce lot of string manipulation when used in the right places.

Filters are prefixed by a | symbol, after the model object/variable, the following is the syntax to use filters with expressions.