AngularJS Search Filter Example

In this tutorial, We will inform you how to search filter in AngularJs(AngularJS Search Filter Example). Now, We will learn to search the data in the search detail using the AngularJs.

We will first take a table using the bootstrap and arrange the code like the below example. here below example in we take a user detail array data.

Whenever you will search on the textbox then data return the filter data and display it.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>AngularJS Search Filter Example - XpertPhp</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script>
	var app = angular.module("XpertPhpApp", []);
	app.controller("XpertPhpCtrl", function ($scope) {
	$scope.users = [{
	firstname: "John",
	lastname: "Doe",
	email: "john@gmail.com"
	}, {
	firstname: "Mary",
	lastname: "Moe",
	email: "mary@gmail.com"
	}, {
	firstname: "July",
	lastname: "July",
	email: "july@gmail.com"
	}, {
	firstname: "jay",
	lastname: "Doe",
	email: "jay@gmail.com"
	}];
	});
	</script>
</head>
<body ng-app="XpertPhpApp">
	<div class="container">
	  <div ng-controller="XpertPhpCtrl">
	  <label for="txtSearch">Search:</label> <input id="txtSearch" ng-model="txtSearch" class="form-control" type="text" placeholder="Here Search">
			<table class="table table-bordered">
				<thead>
				  <tr>
					<th>Firstname</th>
					<th>Lastname</th>
					<th>Email</th>
				  </tr>
				</thead>
				<tbody>
				  <tr ng-repeat="user in users | filter : txtSearch">
					<td>{{user.firstname}}</td>
					<td>{{user.lastname}}</td>
					<td>{{user.email}}</td>
				  </tr>
				</tbody>
			</table>
		</div>
	</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>AngularJS Search Filter Example - XpertPhp</title>

var app = angular.module("XpertPhpApp", []);

app.controller("XpertPhpCtrl", function ($scope) {

$scope.users = [{

firstname: "John",

lastname: "Doe",

email: "john@gmail.com"

}, {

firstname: "Mary",

lastname: "Moe",

email: "mary@gmail.com"

}, {

firstname: "July",

lastname: "July",

email: "july@gmail.com"

}, {

firstname: "jay",

lastname: "Doe",

email: "jay@gmail.com"

}];

});

</script>

</head>

<label for="txtSearch">Search:</label> <input id="txtSearch" ng-model="txtSearch" class="form-control" type="text" placeholder="Here Search">

<thead>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Email</th>

</tr>

</thead>

<tbody>

<td>{{user.firstname}}</td>

<td>{{user.lastname}}</td>

<td>{{user.email}}</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

Show Demo