Introduction to AngularJS Filter Array
Filter array in Angular JS means filtering the array items based upon the condition passed to the filter. Filter array plays a crucial role when IT is used to fetch the data from an array based on names, price, date, special characters, etc. In this topic, we are going to learn about AngularJS Filter Array.
The developer can create their custom filters. For example, filters in an array are applied after pipe symbol (|) followed by expressions like below.
arrayReference | filter : expression
Real-Time Scenario: When we buy a product from the Amazon website, we first search for a product. It populates 1000s of products with different prices, brands, offers, sizes, etc. But as a customer, we don’t want all these products; then, we applied a filter to the result set. This kind of application requirement filter array plays a vital role.
Advantages
- Populates exact data by discarding unnecessary data.
- Easy to apply in Angular JS.
- Provided by so many predefined filters.
How Does Filter Array Create in AngularJS?
Filter array in Angular JS applied in 2 ways:
1. Filter with expression
Syntax:
{{ arrayReference | filter : expression}}
arrayReference: It has given array data.
Filter: Says Angular JS to filter the data.
Expression: It select the data from an array if the given expression is true.
2. Filter with comparator
{{ arrayReference | filter : 'key': expression, 'value':expression}}
key': expression, 'value':expression: is said to the comparator. It compares both key and value pairs, if both expressions are true then the result will be shown.
- Filter array works based on expression and comparator.
- Allow Angular JS in html below the library must be added.
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
Important AngularJS Terminology
- ng-app: This directive defines the main Angular JS application flow.
- Ng-model: This directive binds the HTML data into the Angular JS application.
- Ng-init: This directive initializes Angular JS application variables.
- ng-controller: This directive makes the application a controller.
- var app = angular.module(‘applicationName’, []): Creates the application with applicationName.
- $scope: It is a built-in object containing the main application data and its methods.
- Ng-repeat: Iterates an array.
Examples of AngularJS Filter Array
Here are the following examples of AngularJS Filter Array mentioned below
Example #1
Filtering course with course name expression.
Angular JS Code: CourseFilter.html
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Filter</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<style>
.p{
color:green;
border: 2px solid brown;
}
.c{
color:gray;
border: 2px solid brown;
}
</style>
</head>
<body>
<div ng-app="myFilterApp" ng-controller="courseController">
<h1 class="c">Course Filter Array</h1>
<ul>
<strong>
<li ng-repeat="course in courses | filter : 'J'">
{{ course }}
</li>
</strong>
</ul>
</div>
<script>
angular.module('myFilterApp', []).controller(
'courseController', function($scope) {
$scope.courses = [
'Java',
'Spring',
'Hibernate',
'Angular JS',
'Python',
'Spring Boot',
'C',
'C#',
'Augmented Reality'
];
});
</script>
<p class="p">
All the courses in the array list will be filtered based on expression "J". If all array values with "J"will be shown.
</p>
</body>
</html>
Output:
Example #2
Filtering course key with its value.
Angular JS Code: FilteringKeyValue.html
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Filter</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<style>
.p{
color:pink;
border: 2px solid yellow;
}
.c{
color:pink;
border: 2px solid yellow;
}
</style>
</head>
<body>
<div ng-app="filterApp" ng-controller="filterController">
<h1 class="c">Course Filter Array</h1>
<ul>
<li ng-repeat="x in courses | filter : {'course' : 'S'}">{{x.course}}</li>
</ul>
</div>
<script>
var app = angular.module('filterApp', []);
app.controller('filterController', function($scope) {
$scope.courses = [
{"course" : "Servlets"},
{"course" : "JSP"},
{"course" : "Angular JS"},
{"course" : "Spring"},
{"course" : "Spring Boot"},
{"course" : "C" },
{"course" : "Python"}
];
});
</script>
<p class="p">
All the courses in the array list will be filtered based on expression course value "S". If all array values have course with "S" then it will be shown.
</p>
</body>
</html>
Output:
Example #3
Filtering Key and Value pair.
Angular JS Code: FilteringKeyValuePair.html
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Filter</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<style>
.p{
color:green;
border: 2px solid red;
}
.c{
color:green;
border: 2px solid red;
}
</style>
</head>
<body>
<div ng-app="filterApp" ng-controller="filterController">
<h1 class="c">Person Filter Array</h1>
<ul>
<li ng-repeat="p in persons | filter : {'person' : 'a','Age':'24'}">{{"Person: "+p.person+" Age: "+p.Age}}</li>
</ul>
</div>
<script>
var app = angular.module('filterApp', []);
app.controller('filterController', function($scope) {
$scope.persons = [
{"person" : "Likes Mango","Age" : "24"},
{"person" : "Likes Banana","Age" : "23"},
{"person" : "Likes Apple","Age" : "25"},
{"person" : "Likes Orange","Age" : "23"},
{"person" : "Likes Gova","Age" : "24"},
{"person" : "Likes Grapes","Age" : "24" },
{"person" : "Likes Pineaple","Age" : "22"}
];
});
</script>
<p class="p">
All the Persons and Ages in the array list will be filtered based on expression person value "a" and Age value "24". If all array values have person value "a" and Age value "24" then it will be shown.
</p>
</body>
</html>
Output:
Example #4
Filtering array list with employee name and Date of Joining.
Angular JS Code: EmployeeDOJ.html
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Filter</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<style>
.p{
color:red;
border: 2px solid brown;
}
.c{
color:red;
border: 2px solid brown;
}
</style>
</head>
<body>
<div ng-app="filterApp" ng-controller="filterController">
<h1 class="c">Employee Filter Array</h1>
<ul>
<li ng-repeat="e in employee | filter : {'employee' : 'a','DOJ':'02'}">{{"Employee: "+e.employee+" Date of Joining: "+e.DOJ}}</li>
</ul>
</div>
<script>
var app = angular.module('filterApp', []);
app.controller('filterController', function($scope) {
$scope.employee = [
{"employee" : "Paramesh","DOJ" : "25-02-2018"},
{"employee" : "Amardeep","DOJ" : "26-02-2018"},
{"employee" : "Venkatesh","DOJ" : "27-02-2018"},
{"employee" : "Shiva","DOJ" : "28-05-2018"},
{"employee" : "Rajitha","DOJ" : "28-02-2018"},
{"employee" : "Navatha","DOJ" : "30-03-2018" },
{"employee" : "Krishna","DOJ" : "31-03-2018"}
];
});
</script>
<p class="p">
All the Employees and Date of Joings in the array list will be filtered based on expression employee value "a" and DOJ value "02"nd month. If all array values have employee value "a" and DOJ value "02"nd month then it will be shown.
</p>
</body>
</html>
Output:
Conclusion
Filter array in Angular JS filters the data based on expression and comparator. It can filter strings, numbers, dates, special characters, etc.
Recommended Articles
This is a guide to AngularJS Filter Array. Here we discuss How Does Filter Array Create in AngularJS along with the examples and outputs. You may also look at the following articles to learn more –
