AngularJS Search Specific Data From Array Using Filter

In this AngularJS filter filter example you will learn how to search specific data from array using 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:search:strict}}

AngularJS Search Specific Data From Array Using Filter Example

<!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 specific data from array 
	using 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 specific data from array 
	using filter Example</legend>             
  <div ng-app="app">     
    <div ng-controller="ParentController">  
      <label>Search Name Only: <input ng-model="search.firstName"></label>
      <ul ng-repeat="emp in employees | filter:search:strict">  
        <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>

See Live Example

« Previous