In this AngularJS filter filter example you will learn how to search data from array using filter filter.
Here you can view the output of the example and you can also "try it yourself" by clicking on "Live Demo" button given at the bottom.
Syntax
{{ Array[] | filter:searchText}}
<!DOCTYPE html>
<html>
<head> <!-- www.techstrikers.com -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
<meta charset="utf-8">
<title>AngularJS Search data from array
using filter filter Example</title>
<script>
var app = angular.module('app', []);
app.controller("ParentController", function ($scope) {
$scope.employees = [{
firstName:"Jimi",
lastName:"Scott",
jobTitle:"Developer",
salary:20000,
phone:"345-333-7845"
},
{
firstName:"Bailey",
lastName:"Lee",
jobTitle:"Lead",
salary:30000,
phone:"322-121-213"
},
{
firstName:"Aura",
lastName:"Martin",
jobTitle:"QA",
salary:35000,
phone:"322-333-0987"
},
{
firstName:"Austin",
lastName:"Williams",
jobTitle:"Designer",
salary:20000,
phone:"322-265-2321"
},
{
firstName:"Bara",
lastName:"Miller",
jobTitle:"Tester",
salary:15000,
phone:"322-890-2321"
},{
firstName:"Carlton",
lastName:"Taylor",
jobTitle:"Manager",
salary:45000,
phone:"322-456-2321"
},
{
firstName:"Adisa",
lastName:"White",
jobTitle:"Developer",
salary:25000,
phone:"121-333-2321"
}];
});
</script>
</head>
<body style="background-color:#DDE4E9;">
<fieldset style="background-color:#DDE4E9;">
<legend>AngulerJS Search data from array
using filter filter Example</legend>
<div ng-app="app">
<div ng-controller="ParentController">
<label>Search Any Field: <input ng-model="searchText"></label>
<ul ng-repeat="emp in employees | filter:searchText">
<li>Name : {{ emp.firstName + ' ' + emp.lastName }}</li>
<li>Job Title : {{ emp.jobTitle }}</li>
<li>Salary : {{ emp.salary }}</li>
<li>Phone : {{ emp.phone }}</li>
</ul>
</div>
</div>
</div>
</fieldset>
</body>
</html>