How to use filter within controllers in AngularJS ?

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:
AngularJS filter Filter:
AngularJS currency Filter:
AngularJS number Filter:
AngularJS date Filter:
AngularJS json Filter:
AngularJS lowercase Filter
AngularJS uppercase Filter:
AngularJS limitTo Filter
AngularJS orderBy Filter
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 templatesSyntax:
By applying the Filters to expressions in view templates:{{ expression | filter }} 
{{ expression | filter }} 
Filters can be applied to the result of another filter. It is called “chaining”:{{ expression | filter1 | filter2 | ... }}
{{ expression | filter1 | filter2 | ... }}
Filters may have arguments:{{ expression | filter:argument1:argument2:... }}
{{ 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 stockprompt("", "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);
};

$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);

$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:
AngularJS-Misc
Picked
AngularJS
Technical Scripter
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.