In this tutorials we are going to implementing the most useful functionality of AngularJs search.
The example demonstrates an employee table which having the information about employee name , id, dept number. Here we are going to filter employees based on name and based on department ids presented in dropdown.
AngularJs Search Filter Example :
[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Angular Filter Example</title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("employeeCotroller", function($scope) {
$scope.employees = [ {
empId:1001,
empName : "john",
deptId : "3005",
}, {
empId:1002,
empName : "scott",
deptId : "3006",
}, {
empId:1003,
empName : "james",
deptId : "3005",
} , {
empId:1004,
empName : "smith",
deptId : "3001",
} , {
empId:1005,
empName : "adam",
deptId : "3001",
} , {
empId:1006,
empName : "philips",
deptId : "3005",
} , {
empId:1007,
empName : "chandra",
deptId : "3008",
}, {
empId:1008,
empName : "shekhar",
deptId : "3007",
}, {
empId:1009,
empName : "rahul",
deptId : "3007",
}, {
empId:1010,
empName : "dravid",
deptId : "3001",
}]
})
</script>
</head>
<body ng-app="myApp">
<h1>AngularJs Searching using Filters</h1>
<br><br>
Enter Employee Name To Search :
<input type="text" ng-model="searchByName"/>
<br><br>
Select Departmet to Search :
<select ng-model="searchByDept">
<option value="">All</option>
<option>3001</option>
<option>3005</option>
<option>3006</option>
<option>3007</option>
<option>3008</option>
</select>
<br><br>
<table ng-controller="employeeCotroller" border="2">
<tr style="background-color:green">
<td>Employee Id</td>
<td>Employee Name</td>
<td>Department Id</td>
</tr>
<tr ng-repeat="employee in employees | filter:{’empName’:searchByName,’deptId’:searchByDept}">
<td>{{employee.empId }}</td>
<td>{{employee.empName }}</td>
<td>{{employee.deptId }}</td>
</tr>
</table>
</body>
</html>
[/html]
Output :
[advanced_iframe securitykey=”85899c43cd5d45b9ec5729b5189d1961d89f90d9″ src=”http://nhk.e6a.mytemp.website/AngularJsExamples/Angular_Search_Filter.html”]
