Suggested Videos
Part 9 - Sorting data in AngularJS
Part 10 - AngularJS sort rows by table header
Part 11 - Search filter in AngularJS
In this video we will discuss how to filter by multiple properties in AngularJS.
In the example below, 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.
Script.js :
HtmlPage1.html :
Styles.css
The following example has a single search textbox, and is used to search multiple properties - name and city.
Script.js :
HtmlPage1.html :
Part 9 - Sorting data in AngularJS
Part 10 - AngularJS sort rows by table header
Part 11 - Search filter in AngularJS
In this video we will discuss how to filter by multiple properties in AngularJS.
In the example below, 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.
Script.js :
var app = angular
.module("myModule", [])
.controller("myController",
function
($scope) {
var employees = [
{ name: "Ben",
gender: "Male", salary: 55000, city: "London" },
{ name: "Sara",
gender: "Female", salary: 68000, city: "Chennai" },
{ name: "Mark",
gender: "Male", salary: 57000, city: "London" },
{ name: "Pam",
gender: "Female", salary: 53000, city: "Chennai" },
{ name: "Todd", gender:
"Male", salary: 60000, city: "London" },
];
$scope.employees = employees;
});
HtmlPage1.html :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/Script.js"></script>
<link href="Styles.css" rel="stylesheet" />
</head>
<body ng-app="myModule">
<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>
<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>
Styles.css
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;
}
The following example has a single search textbox, and is used to search multiple properties - name and city.
Script.js :
var app = angular
.module("myModule", [])
.controller("myController",
function
($scope) {
var employees = [
{ name: "Ben",
gender: "Male", salary: 55000, city: "London" },
{ name: "Sara",
gender: "Female", salary: 68000, city: "Chennai" },
{ name: "Mark",
gender: "Male", salary: 57000, city: "London" },
{ name: "Pam",
gender: "Female", salary: 53000, city: "Chennai" },
{ name: "Todd",
gender: "Male", salary: 60000, city: "London" },
];
$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;
};
});
HtmlPage1.html :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/Script.js"></script>
<link href="Styles.css" rel="stylesheet" />
</head>
<body ng-app="myModule">
<div ng-controller="myController">
Search : <input type="text" placeholder="Search city & name"
ng-model="searchText" />
<br /><br />
<table>
<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>
Hi Venkat,
ReplyDeletesearch function not added to the textbox how it's invoking when we enter text in textbox, if it is two way databinding, searchText not used any where?
It is invoking on filter............
ReplyDeletesome queries i have
ReplyDeletewe are not pasing perameter in search and you are using parameter with search at function defination
$scope.search = function (item) {
if ($scope.searchText == undefined) {
return true;
}
else {
//how item is related to city and name can u explain please ?
if (item.city.toLowerCase()
.indexOf($scope.searchText.toLowerCase()) != -1 ||
item.name.toLowerCase()
.indexOf($scope.searchText.toLowerCase()) != -1) {
return true;
}
}
return false;
};
i am trying search for salary along with city and name but its not working.
ReplyDelete