How to use filter within controllers in AngularJS ?
Last Updated :
05 Sep, 2022
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=
"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.
HTML
<!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>
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=
"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:
Similar Reads
How to create nested controllers in Angular.js ?
A controller in AngularJS is a JavaScript object created with the help of a JavaScript object constructor. A controller can contain properties and functions. Controllers are used for controlling the application data of an AngularJS application. In this article, we will see the nested controllers in
4 min read
How to share data between controllers in AngularJS ?
The task is to share data variables between two or more controllers by using AngularJS. There are many procedures to achieve this. Here we will discuss the most popular ones. Approach: To share data between the controllers in AngularJS we have two main cases: Share data between parent and child: Her
3 min read
How to insert HTML into view from AngularJS controller?
The ng-bind-html directive is a secure way of binding content to an HTML element. So in order to insert HTML into view, we use the respective directive. While using AngularJS, write HTML in our corresponding application, we should check the HTML for dangerous or error prone code. By including the "a
2 min read
How to Sort List by Date Filter in AngularJS ?
AngularJS is a feature-based JavaScript framework that uses various tools to create dynamic single-page web applications. While developing the application we have the requirement to play with the data in AngularJS and sort this list of data by a date properly in descending order. This can be done us
5 min read
What is the Lifecycle of an AngularJS Controller ?
The Lifecycle defines the journey of the application, which it goes through, right from creation to destruction. The lifecycle of AngularJS determines how the data interacts with AngularJS. Understanding the lifecycle enables the developer to more efficiently develop applications with greater code r
6 min read
How to concat strings using AngularJS ?
In this article, we will see how to concat strings in AngularJS. There are few ways to concat the strings in AngularJS. In this article, we will see 2 of them.Example 1: In the first example, we are using the '+' operator to concat the strings HTML<!DOCTYPE HTML> <html> <head> <
2 min read
How to disable buttons using AngularJS ?
In this article, we will see how to disable the button using the particular directive in AngularJS. Sometimes, we need to disable the button, and link on the click event. This task can be accomplished by implementing the ng-disabled directive that is used to enable or disable HTML elements. Syntax:
2 min read
AngularJS ng-controller Directive
The ng-controller Directive in AngularJS is used to add a controller to the application. It can be used to add methods, functions, and variables that can be called on some event like click, etc to perform certain actions. Syntax: <element ng-controller="expression"> Contents... </element
2 min read
What is currency filter in AngularJS ?
In this article, we will know the currency filters in AngularJS, along with understanding its implementation through the examples. Filters are used to modify or format the given data in a certain way. AngularJS has different filters such as uppercase, lowercase, etc. One of those filters is the curr
2 min read
How to Filter an Array based on user input in AngularJS ?
AngularJS is a JavaScript-based framework. It can be used by adding it to an HTML page using a <script> tag. AngularJS helps in extending the HTML attributes with the help of directives and binding of data to the HTML with expressions. Angular filters can be added in AngularJS to format data.
3 min read