Create an AngularJS application that displays a list of employees and their salaries. Allow users to search for employees by name and salary.
Program:-
<!DOCTYPE html>
<html>
<title>Angular JS Filter Employee Search Application</title>
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.mi
n.js"></script>
<script>
var app=angular.module("empSearchApp",[]);
app.controller("empSearchAppCntrl",function($scope){
$scope.empList=[
{'name':'Harish Kumar B T','salary':500000},
{'name':'Chetan','salary':400000},
{'name':'Manju','salary':300000},
{'name':'Prashanth','salary':400000},
{'name':'Thanuja','salary':500000},
{'name':'Manasa','salary':600000}
]
$scope.clearFilters=function()
{
$scope.searchName=''
$scope.searchSalary=''
}
});
</script>
</head>
<body ng-app="empSearchApp">
<h1>Employee Search Application</h1>
<div ng-controller="empSearchAppCntrl">
Search by Employee Name:<input type="text" ng-model="searchName">
Search by Employee salary:<input type="number"
ng-model="searchSalary">
<button ng-click="clearFilters()">Clear Filters</button>
<br/>
<h3>List of Employees</h3>
<table border="1">
<tr>
<th>SLNO</th>
<th>EMP NAME</th>
<th>SALARY</th>
</tr>
<tr ng-repeat="emp in empList |
filter:{name:searchName,salary:searchSalary}">
<td>{{$index+1}}</td>
<td>{{emp.name}}</td>
<td>{{emp.salary}}</td>
</tr>
</table>
</div>
</body>
</html>