EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login
Home Software Development Software Development Tutorials AngularJS Tutorial AngularJS Filter Array
Secondary Sidebar
AngularJS Tutorial
  • AngularJS Basic and Advance
    • What is AngularJS
    • Career In AngularJS
    • Uses of Angular JS
    • AngularJS Architecture
    • Angular JS Application
    • AngularJS Application
    • AngularJS Filter Array
    • AngularJS ng-style
    • AngularJs ng init
    • AngularJs ng-repeat
    • AngularJs ng-change
    • AngularJs ng-options
    • AngularJs expressions
    • AngularJs onclick
    • AngularJS ng-show
    • AngularJs ng-include
    • Scope in AngularJS
    • AngularJS ng-if
    • AngularJS Number Filter
    • AngularJS Date Filter
    • AngularJS ng-class
    • AngularJS ng-model
    • AngularJS ng-disabled
    • AngularJS Custom Filter
    • AngularJS Validation
    • AngularJS Filters
    • Controllers in AngularJS
    • AngularJS Animations
    • AngularJS Services
    • AngularJS Events
    • AngularJS Versions
    • AngularJS Directives
    • AngularJS Unit Testing
    • AngularJS with Bootstrap
    • AngularJS UI Bootstrap
    • AngularJS Routing Example
  • Interview Question
    • Angular JS Interview Questions

AngularJS Filter Array

AngularJS Filter Array

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

All in One Software Development Bundle(600+ Courses, 50+ projects)
Python TutorialC SharpJavaJavaScript
C Plus PlusSoftware TestingSQLKali Linux
Price
View Courses
600+ Online Courses | 50+ projects | 3000+ Hours | Verifiable Certificates | Lifetime Access
4.6 (86,502 ratings)

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.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

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:

Angularjs Filter Array output 1

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:

Angularjs Filter Array output 2

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:

output 3

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:

output 4

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 –

  1. Controllers in AngularJS
  2. AngularJS Animations
  3. What is AngularJS
  4. AngularJS Versions
0 Shares
Share
Tweet
Share
Primary Sidebar
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2022 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA
Free Software Development Course

C# Programming, Conditional Constructs, Loops, Arrays, OOPS Concept

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more