Search
Filter In Angular JS :
In this Example we are going to search
records by using search filter.
Type
search keyword in Search field and check the tables changing based on the
search result.
After entering the data into the textbox,
records related to that data will display.
SearchFilter.html
<!DOCTYPE html PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<title>ng-repeat Directive</title>
<link href="Styles.css"
rel="stylesheet"/>
<script>
var
app = angular.module("myModule", []);
app.controller("myController", function($scope){
var
employees = [
{firstName: "Linda", gender: "Female", salary: 80000.45, city: "New York"},
{firstName: "axel",
gender: "Male", salary: 59000.98, city: "Tokyo" },
{firstName: "Mark",
gender: "Male", salary: 45000, city: "New York" },
{firstName: "shown", gender: "Male", salary: 35000, city: "Tokyo" }
];
$scope.employees =
employees;
});
</script>
</head>
<body>
<div ng-app="myModule"
ng-controller="myController">
Search : <input type="text"
placeholder="search here" ng-model="serchText" />
<br/><br/>
<table>
<thead>
<tr>
<th>FirstName</th>
<th>Gender</th>
<th>Salary</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in
employees | filter:serchText">
<td>{{ employee.firstName }}</td>
<td>{{ employee.gender }}</td>
<td>{{ employee.salary }}</td>
<td>{{ employee.city }}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Style.css
File
body
{
font-family:
Arial;
}
table{
border-collapse: collapse;
}
td{
border: 1px solid
black;
padding:
5px;
}
th
{
border: 1px solid
black;
padding:
5px;
text-align:
left;
}
In the above example we are using filter
named “serchText”. In search textbox we are binding that filter by using
ng-model directive.
Whenever user enter any character within
textbox records containing that character will display.
