Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Filter an Array based on the user input in AngularJS ?
Overview
An array can be a collection of anything but should be of the same data type. We can store any digit and text of the array, so to filter the data from an array using the AngularJs can be achieved by some key value attributes pair. The filter rule plays a key role to create this feature, there are also some AngularJs attributes that play a major role to build this feature these are: ng−model and ng−repeat. The ng−model attribute defines the input type text search box to connect with the ordered list and filter it out an array.
AngularJs CDN Link
The given script tag is the Content Delivery Network (CDN) link for the AngularJs framework, to use the features and modules of AngularJs add this CDN link to your HTML document.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script>
Algorithm
Step 1 − Create a HTML file on your text editor with the filename as "index.html", add the HTML boilerplate to the index.html file.
Step 2 − Now to use the AngularJs modules to your file add the above given CDN link to the head tag of the HTML document.
Step 3 − Now create a parent div tag for the filter interface and add an attribute to the tag as ng−app with the value of "myApp".
<div ng-app="myApp"></div>
Step 4 − Now create a div controller inside the parent ng−app container and add an attribute as ng−controller to the div tag and add the value as "myController" to the attribute.
<div ng-controller="myController"></div>
Step 5 − Now create a HTML search bar with the type "text", add an attribute to the input tag as ng−model with the value of "filterList".
<input type="text" name=" filterText " id=" filterText " ng-model="filterList">
Step 6 − Now create a script tag before the closing tag of the body.
<script></script>
Step 7 − Now use the angular Syntax to create a module and connect it with the HTML interface ng−app and also with the ng−controller. Also pass the "$scope" as a parameter to the controller arrow function.
angular.module("myApp", []).controller("myController", ($scope) => {
});
Step 8 − Now use the $scope global variable to create a variable for an array. Also store the data to the array which is initialized.
angular.module("myApp", []).controller("myController", ($scope) => {
$scope.lists = ["Apple" , "Pomegranete" , "Guava2" , "Watermelon" , "Casew" , "Plums" , "Zebra" , "Quest" , "Guava1"];
});
Step 9 − Now create an unordered list just below the HTML input tag to get the rendered array to the interface of the web page.
<ul></ul>
Step 10 − Add the list tag to the unordered list with an attribute as ng−repeat.
<li ng-repeat=""> </li>
Step 11 − Now use the "in" loop to render the data from the array to the list of the unordered list and add the expression name to the list tag in between {{expression}}.
<li ng-repeat="list in lists"> {{ list }} </li>
Step 12 − To add the filter functionality to the search box add the value with "|" to the ng−repeat attribute in continuation within the loop.
<li ng-repeat="list in lists | filter:filterList"> {{ list }} </li>
Step 13 − The filter for an array is created successfully using AngularJs.
Example
In this Example we will learn to filter an array using AngularJs framework when a user inputs any value to the input box. So for this we will import the framework CDN link and create a list so that the array which we will create in the script tag can be rendered into the user interface. So to add the functionality of filter to the array the "filter:inputTagNgModelName" is used. The name used in the for in loop to store and render the list data should be exact same for the expression in the list tag.
<html>
<head>
<title> Filter an array using AngularJs </title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myController">
<input type="text" name=" filterText " id=" filterText " ng-model="filterList">
<ul>
<li ng-repeat="list in lists | filter:filterList"> {{ list }} </li>
</ul>
</div>
</div>
<script>
angular.module("myApp", []).controller("myController", ($scope) => {
$scope.lists = ["Apple" , "Pomegranete" , "Guava2" , "Watermelon" , "Casew" , "Plums" , "Zebra" , "Quest" , "Guava1"];
});
</script>
</body>
</html>
The below given image shows the Output of the above Example, so when a user loads this on the browser he will get an interface with a list and a search bar. In the search bar you can type any letter from A to Z and will get the result below the search bar as a filtered list. As the list is rendered from an array so the filter is directly filtering out the data from an array. As the user has typed in a letter "A" into the search box so form the below list all the data which has a letter "A" in there spelling are displayed as a new list.
Conclusion
As we are using the CDN link of the AngularJs so to make the script work in your browser it is required to connect to your internet connection if your system is not connected to the internet then the list may not be rendered to the browsers screen and only the expression variable will be displayed. The above feature which we have created is widely used in the contact books or in the database for filtering out the data. We can also use this feature to filter out the number from the phone directory. You should make sure that all the spellings of the attributes involved in filtering the array should be correct because if any of the spelling is incorrect then the list may not be rendered properly and you may get a blank browser page. We can also customize this feature using Cascading Styles Sheets to make an attractive user interface.
102 Views
