Open In App

How to use filter within controllers in AngularJS ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see how to use the Filter inside the controller using AngularJS. Filters are used to format the value of an expression and display it to the user. It can be used in HTML Previews, Controllers or Services, and directives. AngularJS facilitates many built-in filters, although, we can create & define the custom filters easily. The list of built-in filters in AngularJS is given below:

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 filters 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:... }}

Example 1: This example describes the use of the Filter inside the controller in AngularJS.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
</head>
  
<body style="text-align: center">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>
        Implementing the Filter inside the Controllerin AngularJS
    </h3>
    <div ng-app="app1" ng-controller="currencyCtrl">
        <h3>Price: {{ price | currency }}</h3> </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 the filter into your directive/controller/service

Example 2: This is another example that describes the use of the Filter inside the controller in AngularJS.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
</head>
  
<body style="text-align: center">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>
        Implementing the Filter inside the Controllerin AngularJS
    </h3>
    <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>
</body>
</html>


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 that 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 the 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);

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

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>
        Implementing the Filter inside the Controller in AngularJS
    </h3>
    <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:

 



Last Updated : 05 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads