Angularjs filter by multiple properties:-
Example (1):-
In the example above, we are using multiple search textboxes. As you type in the "Search name" textbox, only the name property is searched and matching elements are displayed. Similarly, as you type in the "Search city" textbox, only the city property is searched and the matching elements are displayed. When the "exact match" checkbox is checked, an exact match search is performed.
Demo.js
var app = angular
.module("myModule", [])
.controller("myController", function ($scope) {
var employees = [
{ name: "Anu", gender: "Female", salary: 5000, city: "Noida" },
{ name: "Santosh Kumar Singh", gender: "Male", salary: 6000, city: "Patna" },
{ name: "Abhinav Kumar", gender: "Male", salary: 5000, city: "New Delhi" },
{ name: "Manorma", gender: "Female", salary: 4000, city: "New Delhi" },
{ name: "Gagan", gender: "Female", salary: 3000, city: "Haryana" },
{ name: "Priyanka", gender: "Female", salary: 7000, city: "Delhi" },
{ name: "Pramod Kumar Sah", gender: "male", salary: 8000, city: "Madhuabni" },
];
$scope.employees = employees;
});
Demo.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="angular.min.js"></script>
<script src="Demo.js"></script>
<style>
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;
}
</style>
</head>
<body ng-app="myModule">
<h3>Angularjs filter by multiple properties Demo by santosh-asp.com </h3>
<div ng-controller="myController">
<input type="text" placeholder="Search name" ng-model="searchText.name" />
<input type="text" placeholder="Search city" ng-model="searchText.city" />
<input type="checkbox" ng-model="exactMatch" /> Exact Match
<br /><br />
<table style="width:43%;">
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees | filter: searchText : exactMatch">
<td> {{ employee.name }} </td>
<td> {{ employee.gender }} </td>
<td> {{ employee.salary }} </td>
<td> {{ employee.city }} </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Example (2):-
The above example has a single search textbox, and is used to search multiple properties - name and city.
Demo.js
var app = angular
.module("myModule", [])
.controller("myController", function ($scope) {
var employees = [
{ name: "Anu", gender: "Female", salary: 5000, city: "Noida" },
{ name: "Santosh Kumar Singh", gender: "Male", salary: 6000, city: "Patna" },
{ name: "Abhinav Kumar", gender: "Male", salary: 5000, city: "New Delhi" },
{ name: "Manorma", gender: "Female", salary: 4000, city: "New Delhi" },
{ name: "Gagan", gender: "Female", salary: 3000, city: "Haryana" },
{ name: "Priyanka", gender: "Female", salary: 7000, city: "Delhi" },
{ name: "Pramod Kumar Sah", gender: "male", salary: 8000, city: "Madhuabni" },
];
$scope.employees = employees;
$scope.search = function (item) {
if ($scope.searchText == undefined) {
return true;
}
else {
if (item.city.toLowerCase()
.indexOf($scope.searchText.toLowerCase()) != -1 ||
item.name.toLowerCase()
.indexOf($scope.searchText.toLowerCase()) != -1) {
return true;
}
}
return false;
};
});
Demo.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="angular.min.js"></script>
<script src="Demo.js"></script>
<style>
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;
}
</style>
</head>
<body ng-app="myModule">
<h3>Angularjs filter by multiple properties Demo by santosh-asp.com </h3>
<div ng-controller="myController">
Search : <input type="text" placeholder="Search City and Name"
ng-model="searchText" />
<br /><br />
<table style="width:43%;">
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees | filter: search">
<td> {{ employee.name }} </td>
<td> {{ employee.gender }} </td>
<td> {{ employee.salary }} </td>
<td> {{ employee.city }} </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
In the example above, we are using multiple search textboxes. As you type in the "Search name" textbox, only the name property is searched and matching elements are displayed. Similarly, as you type in the "Search city" textbox, only the city property is searched and the matching elements are displayed. When the "exact match" checkbox is checked, an exact match search is performed.
Demo.js
Demo.html
Example (2):-
The above example has a single search textbox, and is used to search multiple properties - name and city.
Demo.js
Demo.html