How to use filter within controllers in AngularJS ?

Difficulty Level : Expert
Last Updated : 29 Jan, 2020

Filters are used to format the value of an expression and display to the user. It can be used in HTML Previews, Controllers or Services, and directives. AngularJS has many built-in filters, but we can easily define our own filter.

Built-in filters:

If a filter currency is injected by using the dependency currencyFilter. The injected argument is a function that takes the value to format as the first argument and filter parameters starting with the second argument. The following ways are used to implement the filter.

Approach 1: Using filters in view templates
Syntax:

By applying the Filters to expressions in view templates:
```
{{ expression | filter }} 
```
Filters can be applied to the result of another filter. It is called “chaining”:
```
{{ expression | filter1 | filter2 | ... }}
```

Filters may have arguments:

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

Program:

<!DOCTYPE html>
<html>
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>
<body>
  
    <div ng-app="app1" ng-controller="currencyCtrl">
  
        <h1>Price: {{ price | currency }}</h1>
  
    </div>
  
    <script>
        var app = angular.module('app1', []);
        app.controller('currencyCtrl', function($scope) {
            $scope.price = 100;
        });
    </script>
  
    <p>
      The currency filter formats a number
      to a currency format.
    </p>
  
</body>
  
</html>

Output:

Approach 2: The filter is used in directives, services, and controllers. To achieve this, inject a dependency with the name of filter into your directive/controller/service.

Program:

<script>
var listedItems = [
    { itemID: 001, itemName: "Laptop", stockLeft: 1 },
    { itemID: 002, itemName: "Cell Phone", stockLeft: 3 },
    { itemID: 003, itemName: "Earphones", stockLeft: 0 },
    { itemID: 004, itemName: "Chargers", stockLeft: 5 },
    { itemID: 005, itemName: "Headphones", stockLeft: 0 },
    { itemID: 006, itemName: "USB Cables", stockLeft: 15}
];
  
 listedItems = listedItems.filter(function (item) {
    return (item.stockLeft > 0);
});
  
// This will display the no of items are in stock
prompt("", "There are " + listedItems.length
        + " items left in shop.");
</script>

Output:

Approach 3: It is the modification of the second approach. Filters can also be added to AngularJS to format data values. There is $filter service which is used in our AngularJS controller. In AngularJS, you can also inject the $filter service within the controller and can use it with the following syntax for filter.

Syntax:

$filter("filter")(array, expression, compare, propertyKey)
function myCtrl($scope, $filter)
{
    $scope.finalResult = $filter("filter")(
            $scope.objArray, $scope.searchObj);
};

AngularJS has some built-in filters that can be used to reduce an array’s execution or array at some points based on some condition.
```
$scope.formatDate = $filter("date")($scope.date, "yyyy-MM-dd");
$scope.finalResult = $filter('uppercase')($scope.name);
```

Program: Filters are added to directives, like ng-repeat, by using the pipe symbol or character `|`, followed by a filter tag.

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>
  
<body>
  
    <div ng-app="app1" ng-controller="piprCtrl">
  
        <p>
          Looping with obj object created for 
          nameList array:
        </p>
        <ul>
            <li ng-repeat="obj in nameList | orderBy:'city'">
                {{ obj.name + ', ' + obj.city }}
            </li>
        </ul>
  
    </div>
  
    <script>
        angular.module("app1", []).controller(
                "piprCtrl", function($scope) {
            $scope.nameList = [{
                name: "Hardik",
                city: "Chandigarh"
            }, {
                name: "Shekhar",
                city: "Dehradun"
            }, {
                name: "Sanyam",
                city: "Chandigarh"
            }, {
                name: "Poojan",
                city: "Dehradun"
            }, {
                name: "Aman",
                city: "Muzaffarnagar"
            }, {
                name: "Shashank",
                city: "Roorkee"
            }, {
                name: "Shazi",
                city: "Lucknow"
            }, {
                name: "Harshit",
                city: "Dehradun"
            }, {
                name: "Abhishek",
                city: "Gangoh"
            }];
        });
    </script>
  
</body>
  
</html>

Output:

My Personal Notes

Related Articles