How to Filter an Array based on user input in AngularJS ?
Last Updated :
26 Apr, 2025
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.
In this article, we will be discussing how to filter an array based on user input in AngularJS. Filtering in angular works by typing a letter in the input field and the list will shrink or grow based on the matched results.
Filters in Angular: AngularJS provides users to use filters to transform data like 'currency' which formats a number to a currency format, 'date' which formats a date to a specified format, etc. Filters in angular can be added to an expression or directives using the pipe | symbol as shown below.
{{ expression | filterName:parameter }}To filter an array of data based on the user's input, we use the 'ng-model' directive by setting it on an input field. After which, we can use the value of the input field as an expression in the filter. So, to filter an array, all we need is an array of data and an input field to collect the user input.
The ng-model directive binds the values of the HTML controls like input, select, etc, and stores the required user value in a variable that can be used whenever we require that value. It is mostly supported by <input>, <select>, and <textarea>. For creating the filter to search for an array of data, we'll be using this directive of angular.
Syntax:
<div ng-app="myApp" ng-controller="namesCtrl">
<p>
<input type="text" ng-model="test">
</p>
<ul>
<li ng-repeat="letter in names | filter : test">
{{ letter }}
</li>
</ul>
</div>Example 1: The below example demonstrates how to filter an array based on the user input in HTML. When we click in the Input field and try typing any letter in the input field, we will see that the list will go shrinking if the match results of the typed letter get matched.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>GeeksforGeeks</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<div style="text-align: center">
<h1 style="color: green">GeeksforGeeks</h1>
<h3>Filtering an Array in AngularJS</h3>
</div>
<div>
<div ng-app="gfgApp"
ng-controller="langsCtrl">
<p>Search any word in input field:</p>
<p>
<input type="text" ng-model="test" />
</p>
<ul>
<li ng-repeat=
"word in lang | filter:test">
{{ word }}
</li>
</ul>
</div>
<script>
angular.module("gfgApp", []).controller("langsCtrl",
function ($scope) {
$scope.lang = ["Java","C++","Python",
"Go","C","SQL","JavaScript",
];
});
</script>
</div>
</body>
</html>
Output:
 Example 2: The below example demonstrates a customized array-based filtration on the user input in HTML, where the list of arrays is customized and filtered based on the user input.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>GeeksforGeeks</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<div style="text-align: center">
<h1 style="color: green">GeeksforGeeks</h1>
<h3>Filtering an Array in AngularJS</h3>
</div>
<div>
<div ng-app="gfgApp" ng-controller="langsCtrl">
<p>Search any word in input field:</p>
<p>
<input type="text" ng-model="test" />
</p>
<ul>
<li ng-repeat="word in lang | filter:test"
style="background-color: lightgreen;
width: 5rem; padding: 2px">
{{ word }}
</li>
</ul>
</div>
<script>
angular.module("gfgApp", []).controller("langsCtrl",
function ($scope) {
$scope.lang = ["Java","C++","Python","Go",
"C","SQL","JavaScript"];
});
</script>
</div>
</body>
</html>
Output:
Â
Similar Reads
How to Sort 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. In this article, we will see how to sort an array based o
3 min read
How to push elements in an array using AngularJS ?
Given an array and the task is to perform the push operation on the array using AngularJS. The arr.push() method is used to push one or more values into the array, & new values will add at the end of an array. This method changes the length of the array by the number of elements added to the arr
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
How to update an array element in AngularJS ?
Given an array with an initial array of elements & the task is to update an array element using AngularJS. To update a particular item in an array, there are 2 ways, i.e., either by its value or by its index. Here, we will use the concept of the Property accessors method that is used to access t
2 min read
How to use a Custom Service Inside a Filter 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. An Angular service is a broad category that consists of an
4 min read
How to use ngfor to make a dropdown in Angular from an array ?
In this post, we will see how we can display the array elements in the drop-down menu using AngularJS. Sometimes we need to display dynamically fetched data and this is where features ngFor come into the scene. We can iterate over the array, apply conditions and display the data easily.Using ngFor:
2 min read
How to Filter Multiple Values in AngularJS ?
AngularJS is one of the popular frameworks of many web developers to create dynamic single-page web applications. To make the application more and more dynamic, we can use the filtering of data feature to dynamically show the data to the user as per the input or selection. These provide a better use
6 min read
How to remove an item from an array in AngularJS Scope?
In the AngularJS framework, we can manipulate the data that is within the scope, for example, we can perform the operations on an array by removing its elements. This helps us for better efficiency in developing the web application.We can remove the array elements in the applications like to-do list
5 min read
How to set the input field value dynamically in AngularJS ?
Given an input field and the task is to set the input field value dynamically with the help of AngularJS.Approach: A value is being set to the input field despite the user enter something or not. ng-click event is used to call a function that sets the value to 'This is GeeksForGeeks' with the help o
2 min read
How to make empty an array using AngularJS ?
Given an array & the task is to make empty an array or delete all the elements from the array in AngularJS. In order to do this, there are 2 ways i.e., either use the [] notation to reinitialize the array which eventually removes all the elements from the array, or set the length of the array to
2 min read