How to use filter within controllers in AngularJS ?
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:
- AngularJS filter Filter: This Filter is used to filter the array and object elements and return the filtered items.
- AngularJS currency Filter: This filter is used to convert a number into a currency format.
- AngularJS number Filter: This filter is used to convert a number into a string or text.
- AngularJS date Filter: This filter is used to convert a date into a specified format.
- AngularJS json Filter: This filter is used to convert a JavaScript object into JSON.
- AngularJS lowercase Filter: This filter is used to convert a string into lowercase letters.
- AngularJS uppercase Filter: This filter is used to change a string to an uppercase string or letters.
- AngularJS limitTo Filter: This filter is used to return an array or a string that contains a specified number of elements.
- AngularJS orderBy Filter: This filter is used to sort the given array to the specific order.
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.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</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>
<html><head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </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.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</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>
<html><head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </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.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</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>
<html><head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </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:
