How to use filter within controllers in AngularJS ?

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <script src=
    </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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </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>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.