In this blog, we will learn how to implement a search filter on an HTML table using AngularJS.
To filter table data in AngularJS we generally used the concept of the View and the Controller.
Search table or filter data randomly in AngularJS
The view:- The ng-view directive simply creates a placeholder where a corresponding view (HTML or ng-template view) can be placed based on the configuration.
This “view” directive creates a new scope.
Usage of the scope as an element, attribute, and CSS
as element:
<ng-view [onload="string"] [autoscroll="string"]> ... </ng-view>
as attribute:
<ANY ng-view [onload="string"] [autoscroll="string"]> ... </ANY>
as CSS class:
<ANY class="ng-view [onload: string;] [autoscroll: string;]"> ... </ANY>
Now let’s see the HTML code to filter data in AngularJS.
Implementing a filter in an HTML <table> in AngularJS is very simple, we can transform data using this filter.
In our HTML code, we are assigning font size, margin, padding margin, border font and other things as well so that there will be no need for CSS coding.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<style>
div, input{
font:15px Tahoma;
margin:10px;
}
input {
padding:5px 7px;
}
table, th, td {
border:solid 1px #CCC;
padding:1px 3px;
font:15px Tahoma;
}
th {
font-weight:bold;
}
</style>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
<!--THE SEARCH BOX-->
Search <input type="text" ng-model="search"
placeholder="Enter some text to search" />
<table>
<tr>
<th>ID</th>
<th>Employee Name</th>
<th>Date of Joining</th>
<th>Age</th>
</tr>
<!--TABLE ROWS WITH A FILTER-->
<tr ng-repeat="emps in employees | filter : search">
<td>{{emps.id}}</td>
<td>{{emps.name}}</td>
<td>{{emps.joinDate | date : 'dd/MM/yyyy'}}</td>
<td>{{emps.age}}</td>
</tr>
</table>
</div>
</body>
We have an input field of type text (textbox). This is our search field where we enter letters to search for table rows matching the letters entered. Sometimes you may need to type more than one letter.
We will attach this input field to my table using the ng-model directive.
ng-model="search"
Now, look at the filter (it’s a built-in function used with the ng-repeat directive in the table), followed by the “|” (pipe) symbol. The filter is used with the model object called search (ng-model=”search”).
<tr ng-repeat="emps in empArray | filter : search">
The Controller: AngularJS applications are controlled by controllers. The ng-controller directive defines the application controller. A controller is a JavaScript Object, created by a standard JavaScript object constructor.
In the below code, we are putting values according to our wishes.
If you want to edit the details then you can.
<script>
angular.module("myApp", [])
.controller('myController', ['$scope', function ($scope) {
// JSON ARRAY OBJECT.
$scope.employees =
[
{ 'id': '001', 'name': 'Alpha', 'joinDate': '05/17/2015', 'age': 37 },
{ 'id': '002', 'name': 'Bravo', 'joinDate': '03/25/2016', 'age': 27 },
{ 'id': '003', 'name': 'Charlie', 'joinDate': '09/11/2015', 'age': 29 },
{ 'id': '004', 'name': 'Delta', 'joinDate': '09/11/2015', 'age': 19 },
{ 'id': '005', 'name': 'Echo', 'joinDate': '03/09/2014', 'age': 32 }
]
} ]);
</script>
</html>
Now, in the above process, Angular will search the entire table for the matching letter (or letters), regardless of columns or value types.
We can add more features to it, like filtering data in a particular column.
This is how it looks when it’s all done.
Now we can easily filter the data irrespective of column and row.
Let us show you an example where you can see how the data gets filtered when we write something which is under the table
In the same way, you can change the data according to your choice and search or filter the data of the table as per your wish.
“Need to improve in definitions(Scope) is not clear” as well as structure formatting……
“Not getting clear ANS to filter table data”
